{% load ldap_front %}
{% load card_configuration %}

{% for card_app in card_app_list %}
<div class="card-configuration-card-app position-relative">
    {% if not read_only %}
    <div class="position-absolute top-0 end-0 p-2">
        <form action="{% url 'card_app_delete' card_app_id=card_app.id %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn p-0">
                <i class="bi bi-trash-fill"></i>
            </button>
        </form>
    </div>
    {% endif %}
    <h4>{{card_app.name}}</h4>

    <table class="table table-striped caption-top card-configuration-card-table-key">
        <caption>Card keys</caption>
        <thead>
            <tr>
                <th scope="col" style="width: 10%">Name</th>
                <th scope="col" style="width: 10%">Key ID</th>
                <th scope="col" style="width: 10%">Algo</th>
                <th scope="col" style="width: 10%">Backend</th>
                <th scope="col" style="width: 10%">PKI Server</th>
                <th scope="col" style="width: 5%">Importable</th>
                <th scope="col" style="width: 15%">Validity</th>
                <th scope="col" style="width: 25%">Key Attributes</th>
                <th scope="col" style="width: 5%"></th>
            </tr>
        </thead>
        {% for key in card_app.active_keys %}
            {% if not card_key_id or key.id != card_key_id %}
            <tr>
                <td>{{key.name}}</td>
                <td>0x{{key.key_id|stringformat:"X"}}</td>
                <td>{{key.get_algo_display}}</td>
                <td>{{key.get_backend_display}}{% if key.backend == "HSM" %} - {% if key.hsm %}{{ key.hsm.name }}{% else %}<span style="color:  orangered;">Invalid</span>{% endif %}{% endif %}</td>
                <td>{% if key.pki_server %}{{key.pki_server.name}}{% else %}-{% endif %}</td>
                <td>{{key.is_importable|show_check|safe}}</td>
                <td>{{key.validity_in_days|default_if_none:"-"}}</td>
                <td>
                    {% if not key.key_usage and not key.critical_extended_key_usage and not key.non_critical_extended_key_usage %}
                        -
                    {% else %}
                        {{key.key_usage|key_usage|safe}}{{key.critical_extended_key_usage|non_critical_extended_key_usage|safe}}{{key.non_critical_extended_key_usage|non_critical_extended_key_usage|safe}}
                    {% endif %}
                    {% if key.usage_condition %}
                        <p class="usage_condition"><u>Usage Condition:</u> {{key.get_usage_condition_display}}</p>
                    {% endif %}
                </td>
                <td>
                    <a href="{% url 'card_configuration' %}?card_key_id={{key.id}}" class="btn p-0" title="Edit key">
                        <i class="bi bi-pencil-fill"></i>
                    </a>
                </td>
            </tr>
            {% endif %}
        {% endfor %}
        {% if not read_only %}
        <tr>
            {% include "card_configuration/include/card_key_form.html" %}
        </tr>
        {% endif %}
    </table>

    <table class="table table-striped caption-top card-configuration-card-table-field">
        <caption>Card fields</caption>
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Type</th>
                <th scope="col">Read-Only</th>
                <th scope="col"></th>
            </tr>
        </thead>
        {% for field in card_app.fields.all %}
            <tr>
                <td>{{field.name|default_if_none:"-"}}</td>
                <td>{{field.get_type_display}}</td>
                <td>{{field.is_read_only|show_check|safe}}</td>
                <td></td>
            </tr>
        {% endfor %}
        {% if not read_only %}
        <tr>
            <form action="{% url 'card_app_add_field' card_app_id=card_app.id %}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
            {% csrf_token %}
            <td>
                <div class="col-12">
                    <label class="visually-hidden" for="name">Field Name</label>
                    <div class="input-group">
                      <input type="text" class="form-control" id="name" name="name" placeholder="Field Name">
                    </div>
                </div>
            </td>
            <td>
                <div class="col-12">
                    <label class="visually-hidden" for="type">Field Type</label>
                    <select name="type" id="type" class="form-select">
                        {% for key,value in field_type_list.items %}
                            <option value="{{key}}">{{value}}</option>
                        {% endfor %}
                    </select>                </div>
            </td>
            <td>
                <input class="form-check-input" type="checkbox" name="is-readonly" id="is-readonly">
                <label class="form-check-label" for="is-readonly">Read-only</label>
            </td>
            <td>
                <button type="submit" class="btn btn-primary">Add</button>
            </td>
            </form>
        </tr>
        {% endif %}
</table>
    </div>
{% endfor %}

<script>
const algo_names = {{algo_names|safe}};
const algo_with_certificate = {{algo_with_certificate|safe}};
const algo_list = {{algo_list|safe}};

/**
 * Updates the algorithm select based on the selected backend
 * @param {string} selectedBackend - The selected backend value
 */
function updateAlgorithmList(backendInput, selectedBackend, selectedAlgo) {
    const form = backendInput.form;
    // Select element by name
    const algoSelect = form.elements['algo']

    // Clear existing options
    algoSelect.innerHTML = '';

    if (!selectedBackend || selectedBackend === '') {
        // No backend selected
        algoSelect.innerHTML = '<option value="">Select a backend first...</option>';
        algoSelect.disabled = true;
        return;
    }

    // Get algorithms for the selected backend
    const algorithms = algo_list[selectedBackend];

    if (!algorithms || algorithms.length === 0) {
        // No algorithms found for this backend
        algoSelect.innerHTML = '<option value="">No algorithms available</option>';
        algoSelect.disabled = true;
        return;
    }

    // Add default option
    algoSelect.innerHTML = '<option value="">Select an algorithm...</option>';

    // Add algorithm options
    algorithms.forEach(algoKey => {
        // Only list supported algorithm
        if (algoKey in algo_names) {
            const option = document.createElement('option');
            option.value = algoKey;

            if ((selectedAlgo !== null) && (algoKey === selectedAlgo)) {
                option.selected = true;
            }

            // Use friendly name if available, otherwise use the key itself
            option.textContent = algo_names[algoKey] || algoKey;

            algoSelect.appendChild(option);
        } else {
            console.log("Algo '" + algoKey + "' is not supported.");
        }
    });

    // Enable the select
    algoSelect.disabled = false;
}

/**
 * Handles backend selection change
 */
function handleBackendChange(event) {
    const backendSelect = event.target;
    const selectedBackend = backendSelect.value;

    //TODO: Instead of passing 'null' as 'selectedAlgo', retrieve the current algo to set at the same value
    //      in the other backend.
    updateAlgorithmList(backendSelect, selectedBackend, null);
}

/**
 * Set/Disable validity in days field
 */
function setDefaultValidityInDaysInput(form) {
    const validityInput = form.elements['validity']
    const algoInput = form.elements['algo'];
    var validityValue = null;

    if (algo_with_certificate.includes(algoInput.value)) {
        validityValue = {{config.KEYPME_USER_CERTIFICATE_DURATION_IN_DAYS_DEFAULT}};
    }

    if (validityValue === null) {
        validityInput.value = null;
        validityInput.disabled = true;
    } else {
        validityInput.value = validityValue;
        validityInput.disabled = false;
    }
}

function handleAlgoChange(event) {
    const algoSelect = event.target;
    setDefaultValidityInDaysInput(algoSelect.form);
}

/**
 * Initialize the form when the page loads
 */
function initializeForm() {
    const backendSelects = document.getElementsByName('backend');
    backendSelects.forEach(backendSelect => {
        // Add event listeners
        backendSelect.addEventListener('change', handleBackendChange);

        // Initialize with current backend selection (if any)
{% if card_key_form.algo.value is not None %}
        const selectedAlgo = "{{card_key_form.algo.value|algo_name}}";
{% else %}
        const selectedAlgo = null;
{% endif %}
        updateAlgorithmList(backendSelect, backendSelect.value, selectedAlgo);
    });

    const algoSelects = document.getElementsByName('algo');
    algoSelects.forEach(algoSelect => {
        // Add event listeners
        algoSelect.addEventListener('change', handleAlgoChange);
    });
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    // Use the simple function approach
    initializeForm();
});
</script>

{% if not read_only %}
<div class="card-configuration-card-app">
    <form action="{% url 'card_app_create' %}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
        {% csrf_token %}
        <div class="col-12">
          <label class="visually-hidden" for="name">Card Application Name</label>
          <div class="input-group">
            <input type="text" class="form-control" id="name" name="name" placeholder="Card Application Name" value="{{card_app_form.name.value|default_if_none:""}}">
          </div>
        </div>

        <div class="col-12">
          <button type="submit" class="btn btn-primary">New Card Application</button>
        </div>
    </form>
</div>
{% endif %}