{% load card_configuration %}

{% if card_key_form.instance.pk %}
    <form action="{% url 'card_app_edit_key' card_app_id=card_app.id key_id=card_key_form.instance.pk %}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
{% else %}
    <form action="{% url 'card_app_add_key' card_app_id=card_app.id %}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
{% endif %}
{% csrf_token %}
<td>
    <div class="col-12">
        <label class="visually-hidden" for="name">Key Name</label>
        <div class="input-group">
            <input type="text" class="form-control" id="name" name="name" placeholder="Key Name" value="{{card_key_form.name.value|default_if_none:""}}">
        </div>
    </div>
</td>
<td>
    <div class="col-12">
        <label class="visually-hidden" for="key_id">Key ID</label>
        <div class="input-group">
            <input type="text" class="form-control" id="key_id" name="key_id" placeholder="Key ID (eg: 0x9A)" {% if card_key_form.key_id.value %}value="0x{{card_key_form.key_id.value|stringformat:"x"}}"{% endif %}>
        </div>
    </div>
</td>
<td>
    <div class="col-12">
        <label class="visually-hidden" for="algo">Key algo</label>
        <select name="algo" id="algo" class="form-select">
        </select>
    </div>
</td>
<td>
    <div class="col-12">
        <label class="visually-hidden" for="backend">Backend</label>
        <div class="input-group">
            <select name="backend" id="backend" class="form-select">
                <option value="se" {% if card_key_form.backend.value == "SE" %}selected{% endif %}>Secure Element</option>
                {% for hsm in hsm_list %}
                    <option value="{{ hsm.id }}" {% if card_key_form.hsm.value == hsm.id %}selected{% endif %}>HSM - {{ hsm.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
</td>
<td>
    <div class="col-12">
        <label class="visually-hidden" for="pki_server">PKI Server</label>
        <div class="input-group">
            <select name="pki_server" id="pki_server" class="form-select">
            <option value="">-</option>
            {% for server in pki_server_list %}
                <option value="{{ server.id }}" {% if card_key_form.pki_server.value == server.id %}selected{% endif %}>{{ server.name }}</option>
            {% endfor %}
            </select>
        </div>
    </div>
</td>
<td>
    <div class="col-12">
        <input class="form-check-input" type="checkbox" name="is_importable" id="is_importable" {% if card_key_form.is_importable.value %}checked{% endif %} />
    </div>
</td>
<td>
    <div class="col-12">
        <label class="visually-hidden" for="validity_in_days">Validity</label>
        <div class="input-group">
            <input type="text" class="form-control" id="validity_in_days" name="validity_in_days" placeholder="Validity in days" {%if card_key_form.validity_in_days.value %}value="{{card_key_form.validity_in_days.value}}"{% endif %}>
        </div>
    </div>
</td>
<td>
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header">
            <button class="accordion-button key-usage-tab" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKeyUsage" aria-expanded="true" aria-controls="collapseKeyUsage">
                Key Usage
            </button>
            </h2>
            <div id="collapseKeyUsage" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body key-usage-body">
                <select class="form-select key-usage-form-select" name="key_usage" id="key_usage" multiple size="3" aria-label="Key usage">
                    {% for key_usage_flag in key_usage_flags %}
                        <option value="{{key_usage_flag.0}}" {% has_key_usage card_key_form.key_usage.value forloop.counter0 %}>{{key_usage_flag.1}}</option>
                    {% endfor %}
                </select>
            </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
            <button class="accordion-button key-usage-tab collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNonCriticalExtendedKeyUsage" aria-expanded="false" aria-controls="collapseNonCriticalExtendedKeyUsage">
                Non-Critical Extended Key Usage
            </button>
            </h2>
            <div id="collapseNonCriticalExtendedKeyUsage" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body key-usage-body">
                <select class="form-select key-usage-form-select" name="non_critical_extended_key_usage" id="non_critical_extended_key_usage" multiple size="3" aria-label="Key usage">
                    {% for key_usage_flag in extended_key_usage_flags %}
                        <option value="{{key_usage_flag.0}}" {% has_key_usage card_key_form.non_critical_extended_key_usage.value forloop.counter0 %}>{{key_usage_flag.1}}</option>
                    {% endfor %}
                </select>
            </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
            <button class="accordion-button key-usage-tab collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCriticalExtendedKeyUsage" aria-expanded="false" aria-controls="collapseCriticalExtendedKeyUsage">
                Critical Extended Key Usage
            </button>
            </h2>
            <div id="collapseCriticalExtendedKeyUsage" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body key-usage-body">
                <select class="form-select key-usage-form-select" name="critical_extended_key_usage" id="critical_extended_key_usage" multiple size="3" aria-label="Key usage">
                    {% for key_usage_flag in extended_key_usage_flags %}
                        <option value="{{key_usage_flag.0}}" {% has_key_usage card_key_form.critical_extended_key_usage.value forloop.counter0 %}>{{key_usage_flag.1}}</option>
                    {% endfor %}
                </select>
            </div>
            </div>
        </div>
        <div class="usage_condition">
            <label for="usage_condition">Condition to use the key:</label>
            <select name="usage_condition" id="usage_condition" class="form-select">
                {% for value, label in usage_condition_choices %}
                    <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
</td>
<td>
    {% if card_key_form.instance.pk %}
        <button type="submit" class="btn btn-primary mb-1">Save</button>
        <a class="btn btn-primary" href="{% url 'card_configuration' %}?tab=card-app" role="button">Cancel</a>
    {% else %}
        <button type="submit" class="btn btn-primary">Add</button>
    {% endif %}
</td>
</form>