{% load i18n %} {% load widget_tweaks %}
<div class="oh-modal__dialog-header pb-0">
    <span class="oh-modal__dialog-title" id="uploadFileModalLabel">{% trans "Upload File" %}</span>
    <button class="oh-modal__close--custom" aria-label="Close"
        onclick="event.stopPropagation();event.preventDefault();$(this).closest('.oh-modal--show').removeClass('oh-modal--show');">
        <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
    </button>
</div>
<div class="oh-modal__dialog-body">
    <form id="file-form" hx-post="{% url 'file-upload' document.id %}" hx-target="#objectCreateModalTarget"
        hx-encoding="multipart/form-data" class="oh-profile-section pt-3">
        {% csrf_token %}
        {% if form.employee_id %}
            <input type="hidden" name="employee_id" value="{{form.employee_id.value}}" />
        {% elif form.candidate_id %}
            <input type="hidden" name="candidate_id" value="{{form.candidate_id.value}}" />
        {% endif %}
        <input type="hidden" name="status" value="requested" />
        <input type="hidden" name="title" value="{{form.instance.title}}" />
        <input type="hidden" name="rejection_reason" value="{{form.rejection_reason.value}}" />
        <input type="hidden" name="document_request_id" value="{{form.document_request_id.value}}" />
        {{ form.non_field_errors }}

        <div class="row">
            <div class="col-12 col-sm-12 col-md-4 col-lg-6">
                <div class="oh-input__group">
                    {{ form.document.errors }}
                    <label class="oh-input__label"
                        for="{{form.document.id_for_label}}">{{ form.document.label }}</label>
                        {{ form.document }}
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-6">
                <div class="oh-input__group">
                    <label class="oh-input__label"
                        for="{{form.issue_date.id_for_label}}">{{ form.issue_date.label }}</label>
                    {{ form.issue_date }}
                    {{ form.issue_date.errors }}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-12 col-md-4 col-lg-6">
                <div class="oh-input__group">
                    <label class="oh-input__label" for="{{form.expiry_date.id_for_label}}">
                        {% trans "Expiry Date" %}
                    </label>
                    {{ form.expiry_date }}
                    {{ form.expiry_date.errors }}
                </div>
            </div>
            {% if not model == "CandidateDocument" %}
                <div class="col-12 col-sm-12 col-md-4 col-lg-6 d-none notify">
                    <div class="oh-input__group">
                        <label class="oh-input__label" for="{{form.notify_before.id_for_label}}">
                            {% trans "Notify Before (days)" %}
                        </label>
                        {{ form.notify_before }} {{ form.notify_before.errors }}
                    </div>
                </div>
            {% endif %}
        </div>
        <div class="file-validation mt-3">
            <ul class="m-0">
                <li style="list-style: disc">
                    {% trans "Upload " %}<b>{{ form.instance.document_request_id.format }}</b>
                    {% trans "file" %}
                </li>
                <li style="list-style: disc">
                    {% trans "Max size of the file" %}
                    {{ form.instance.document_request_id.max_size }} MB
                </li>
            </ul>
        </div>
        <div class="oh-modal__dialog-footer p-0 mt-3">
            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
                {% trans "Save" %}
            </button>
        </div>
    </form>
</div>

<script>
    $(document).ready(function () {
        $("#id_expiry_date").on("change", function () {
            if ($("#id_expiry_date").val()) {
                $(".notify").removeClass("d-none");
            } else {
                $(".notify").addClass("d-none");
            }
        });
    });
</script>