{% load static %}
{% load widget_tweaks %}

<form class="transmitter-form" action="" method="post" id="transmitter_{{ suggestion_mode }}-form">
    {% csrf_token %}
    <div class="modal-header">
        <h3 class="modal-title">{{ suggestion_mode|capfirst }} Transmitter{% if suggestion_mode == 'modify' %} Suggestion{% endif %}</h3>
    </div>
    {% if form.errors %}
        <p class="ml-3 mb-0 text-danger">Please correct the errors in the form.</p>
    {% endif %}
    <div class="modal-body">
        <div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
            {% for error in form.non_field_errors %}
                {{ error }}
            {% endfor %}
        </div>

        {% for field in form %}
        {% if 'params' in field.id_for_label %}
            {{ field.value|json_script:"current-params" }}
            {{ transmitter_schema|json_script:"transmitter-schema" }}
            <div id="obsolete-schema-notice" class="d-none alert non-toasted alert-warning text-sm text-center p-1" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                The transmitter's parameters were set using an older schema version.
            </div>
            <div id="conf-controls-container" class="mt-3 mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                    <label for="json-renderer">Current Parameters</label>
                </div>
                <button id="export-configuration-btn" type="button" class="btn btn-satnogs-primary btn-sm"><span class="bi bi-clipboard"></span>Export Configuration</button>
                </div>
                

                <div class="mb-3 bg-light border border-secondary table-responsive" id="json-renderer"></div>

                <div class="d-flex"><button id="edit-conf" type="button" class="ml-auto btn btn-sm btn-satnogs-primary" aria-controls="edit-conf-modal"><span class="bi bi-pencil-square"></span> Edit</button></div>
            </div>
            <textarea class="d-none" id="params-form-input" name="params" hidden></textarea>
        {% else %}
            {% if 'itu_notification' in field.id_for_label %}
                <div class="input-group my-1" data-toggle="tooltip" data-placement="bottom"
                     title="ITU Notifications URLs, add one per line">
                    <label class="input-group-prepend input-group-text" for="{{ field.id_for_label }}_per_line">{{ field.label }}</label>
                    <textarea name="{{ field.name }}_per_line" placeholder="ITU Notification URLs, add one per line" rows="3" wrap="off"
                              class="form-control {% if field.errors %} is-invalid{% endif %}" id="{{ field.id_for_label }}_per_line"></textarea>
                </div>
            {% endif %}
            {% if 'drift' in field.id_for_label %}
                <div class="input-group my-1"
                     {% if field.help_text %}
                         data-toggle="tooltip" data-placement="bottom" title="Drifted frequency, when different from the published frequency"
                     {% endif %}
                >
                    <label class="input-group-prepend input-group-text" for="{{ field.id_for_label }}_hz">{{ field.label }} freq.</label>
                    <input type="number" name="{{ field.name }}_hz" min="-9223372036854775808" max="9223372036854775807"
                           placeholder="Drifted Frequency" class="form-control {% if field.errors %} is-invalid{% endif %}" id="{{ field.id_for_label }}_hz">
                    <label class="input-group-text input-group-append">Hz</label>
                </div>
            {% endif %}

            {% if 'downlink_high' in field.id_for_label %}
                <div id="same_downlink_checkbox_container" class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" value="" id="same_downlink_checkbox">
                    <label class="form-check-label" for="same_downlink_checkbox">
                        Use Downlink low value for Downlink high
                    </label>
                </div>
                {% endif %}
            <div class="input-group my-1"
                 {% if field.help_text %}
                     data-toggle="tooltip" data-placement="bottom" title="{{ field.help_text }}"
                 {% endif %}
                 {% if 'itu_notification' in field.id_for_label %}
                     id="itu-coordination-input-group"
                 {% endif %}
            >
                <label class="input-group-prepend input-group-text" for="{{ field.id_for_label }}">{{ field.label }}</label>
                {% if suggestion_mode == 'update' and citation in field.id_for_label %}
                    <input id="{{ field.id_for_label }}" class="form-control {% if field.errors %} is-invalid{% endif %}" type="text" name="citation"
                        value="" maxlength="512" placeholder="Citation" required="">
                {% else %}
                    {% if field.errors %}
                        {% render_field field class="form-control is-invalid" placeholder=field.label %}
                    {% else %}
                        {% render_field field class="form-control " placeholder=field.label %}
                    {% endif %}
                {% endif %}

                {% if 'drift' in field.id_for_label %}
                    <label class="input-group-text input-group-append">PPB</label>
                {% elif 'low' in field.id_for_label or 'high' in field.id_for_label %}
                    <label class="input-group-text input-group-append">Hz</label>
                {% endif %}
            </div>
            <div class="{% if field.errors %}invalid{% endif %}">
                {% for error in field.errors %}
                    <p class="help-block">{{ error }}</p>
                {% endfor %}
            </div>
        {% endif %}
        {% endfor %}
    </div>

    <div class="modal-footer flex justify-content-between">
        <button id="cancelButton" type="button" class="btn btn-danger">
            Cancel
        </button>
        <button type="submit" class="btn btn-satnogs-primary">{{ suggestion_mode|capfirst }}</button>
    </div>
</form>
<div class="modal" id="edit-conf-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Edit Configuration</h3>
            </div>
            <div class="modal-body">
                <div id="json-editor-container">
                </div>
                <p class="m-0 invalid-feedback" id="form-error-notice">There are errors in the form. Please correct them.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
                <button type="button" id="modal-save-config" class="btn btn-satnogs-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>