{% load i18n %}
<div class="step-setup">
    <div class="field-group field-group-lti-configuration">
        <h6 class="field-group-heading">
            {% trans "LTI Configuration" %}
        </h6>
        <ul class="list-input settings-list">
            <!----------- config_type ----------->
            {% if fields.config_type.values %}
                <li
                    class="field comp-setting-entry {% if fields.config_type.is_set %}is-set{% endif %}"
                    data-field-name="config_type"
                >
                    <label class="label setting-label">{{ fields.config_type.display_name }}</label>
                    <span class="icon fa fa-question-circle" data-tooltip="{{ fields.config_type.help }}"></span>
                    <select
                        class="field-data-control"
                        id="xb-field-edit-config_type"
                        name="config_type"
                    >
                        {% spaceless %}
                            {% for option in fields.config_type.values %}
                                <option
                                    value="{{ option.value }}"
                                    {% if fields.config_type.value == option.value %}selected{% endif %}
                                >
                                    {{ option.display_name }}
                                </option>
                            {% endfor %}
                        {% endspaceless %}
                    </select>
                </li>
            {% endif %}
            <!-------------------------------------->
            <!----------- lti_version ----------->
            <li class="field comp-setting-entry lti-version {% if fields.lti_version.is_set %}is-set{% endif %}" data-field-name="lti_version">
                <label class="label setting-label">{{ fields.lti_version.display_name }}</label>
                <span class="icon fa fa-question-circle" data-tooltip="{{ fields.lti_version.help }}"></span>
                <ul class="button-select-options">
                    {% spaceless %}
                        {% for option in fields.lti_version.values %}
                            <li>
                                <input
                                    type="radio"
                                    name="lti_version"
                                    id="lti_version_option-{{ option.value }}"
                                    value="{{ option.value }}"
                                    {% if fields.lti_version.value == option.value %}checked{% endif %}
                                >
                                <label for="lti_version_option-{{ option.value }}">{{ option.display_name }}</label>
                            </li>
                       {% endfor %}
                    {% endspaceless %}
                </ul>
            </li>
            <!----------------------------------->
            <!------------ lti_id -------------->
            <li
                class="field comp-setting-entry flex-grow {% if fields.lti_id.is_set %}is-set{% endif %}"
                data-field-name="lti_id"
            >
                <label class="label setting-label">{{ fields.lti_id.display_name }}</label>
                <span class="icon fa fa-question-circle" data-tooltip="{{ fields.lti_id.help }}"></span>
                <select
                    class="field-data-control"
                    id="xb-field-edit-lti_id"
                    name="lti_id"
                    {% if not lti_passports %} disabled {% endif %}
                >
                    <option value=""></option>
                    {% spaceless %}
                        {% for passport_id in lti_passports %}
                            <option
                                value="{{ passport_id }}"
                                {% if fields.lti_id.value == passport_id %}selected{% endif %}
                            >
                                {{ passport_id }}
                            </option>
                        {% endfor %}
                    {% endspaceless %}
                </select>
            </li>
            <!----------------------------------->
            <!------------ external_config -------------->
            {% if fields.external_config %}
                <li
                    class="field comp-setting-entry flex-grow {% if fields.external_config.is_set %}is-set{% endif %}"
                    data-field-name="external_config"
                >
                    <label class="label setting-label">{{ fields.external_config.display_name }}</label>
                    <span class="icon fa fa-question-circle" data-tooltip="{{ fields.external_config.help }}"></span>
                    <input
                        class="field-data-control"
                        id="xb-field-edit-external_config"
                        value="{{ fields.external_config.value|default_if_none:"" }}"
                        type="text">
                </li>
            {% endif %}
            <!-------------------------------------->
        </ul>
    </div>
    <hr class="field-group-separator" />
    <div class="field-group field-group-lti-configuration-details l1p1">
        <h6 class="field-group-heading">
            {% trans "LTI 1.1/1.2 Configuration" %}
        </h6>
        <ul class="list-input settings-list">
            <!------------ launch_url -------------->
            <li class="field comp-setting-entry {% if fields.launch_url.is_set %}is-set{% endif %}">
                <label class="label setting-label">{{ fields.launch_url.display_name }}</label>
                <span class="icon fa fa-question-circle" data-tooltip="{{ fields.launch_url.help }}"></span>
                <input class="field-data-control" id="xb-field-edit-launch_url" value="{{ fields.launch_url.value }}" type="text">
            </li>
            <!-------------------------------------->
        </ul>
    </div>
    <div class="field-group field-group-lti-configuration-details l1p3">
        <h6 class="field-group-heading">
            {% trans "LTI 1.3 Configuration" %}
        </h6>
        <ul class="list-input settings-list">
            <!------------ lti_1p3_launch_url -------------->
            <li
                class="field comp-setting-entry {% if fields.lti_1p3_launch_url.is_set %}is-set{% endif %}"
                data-field-name="lti_1p3_launch_url"
            >
                <label class="label setting-label">{{ fields.lti_1p3_launch_url.display_name }}</label>
                <span class="icon fa fa-question-circle" data-tooltip="{{ fields.lti_1p3_launch_url.help }}"></span>
                <input
                    class="field-data-control"
                    id="xb-field-edit-lti_1p3_launch_url"
                    value="{{ fields.lti_1p3_launch_url.value }}"
                    type="text"
                />
            </li>
            <!---------------------------------------------->

            <!------------ lti_1p3_oidc_url -------------->
            <li class="field comp-setting-entry {% if fields.lti_1p3_oidc_url.is_set %}is-set{% endif %} no-external-config">
                <label class="label setting-label">{{ fields.lti_1p3_oidc_url.display_name }}</label>
                <span class="icon fa fa-question-circle" data-tooltip="{{ fields.lti_1p3_oidc_url.help }}"></span>
                <input
                    class="field-data-control"
                    id="xb-field-edit-lti_1p3_oidc_url"
                    value="{{ fields.lti_1p3_oidc_url.value }}"
                    type="text"
                />
            </li>
            <!-------------------------------------------->
            <!------------ lti_1p3_redirect_uris -------------->
            <li class="field comp-setting-entry {% if fields.lti_1p3_redirect_uris.is_set %}is-set{% endif %} no-external-config">
                <label class="label setting-label">{{ fields.lti_1p3_redirect_uris.display_name }}</label>
                <span class="icon fa fa-question-circle" data-tooltip="{{ fields.lti_1p3_redirect_uris.help }}"></span>
                <textarea
                    class="field-data-control"
                    id="xb-field-edit-lti_1p3_redirect_uris"
                    rows="4"
                >{{ fields.lti_1p3_redirect_uris.value }}</textarea>
            </li>
            <!------------------------------------------------->
        </ul>
    </div>
</div>