{% extends "panel.html.twig" %}

{% block head %}
    {{ parent() }}

    <script src="/js/jquery.min.js"></script>
    <script src="/js/forge.min.js"></script>
    <script src="/js/jszip.min.js"></script>
    <script src="/js/FileSaver.min.js"></script>
    <script src="/js/pages/configBuilder.js"></script>

{% endblock %}

{% block panel_contents %}
    <h1 class="title">Config builder</h1>
    <form target="_blank" action="/panel/config-builder" method="post" class="form">
        <div class="row">
            <label for="server">Server</label>
            <select name="fingerprint" id="server">
                {% for server in servers %}
                    <option value="{{ server.getFingerprint() }}">{{ server.getFqdn() }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="row">
            <label for="certificate">Certificate</label>
            <select name="cert" id="certificate">
                {% for certificate in user.getActiveCertificates() %}
                    <option value="{{ certificate.getName() }}" data-has-private-key="{{ certificate.hasPrivateKey() ? '1' : '0' }}">{{ certificate.getName() }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="row">
            <label for="want-embedded">Generate embedded server config</label>
            <input type="checkbox" id="want-embedded" name="want-embedded">
        </div>
        <!-- TODO: Check data attribute to see if the cert is present -->
        <!-- If cert is not on server, also ask for this -->
        <!-- TODO: Make sure this field is not sent when form is submitted -->
        <div class="row" style="display: none">
            <label for="key-location">Select key file</label>
            <input type="file" id="key-location" name="key-location">
        </div>
        <div class="row" style="display: none">
            <label for="decrypt-key">Decrypt embedded private key?</label>
            <input type="checkbox" id="decrypt-key" name="decrypt-key">
        </div>
        <!-- TODO: Make sure this field is not sent when form is submitted -->
        <div class="row" style="display: none">
            <label for="password">Password</label>
            <input type="password" id="password" name="password">
        </div>
        <div class="buttons">
            <button type="submit">Build</button>
        </div>
    </form>
{% endblock %}
