{% load i18n %}
<div class="page-content" id="kep-sign-page"
     data-doc-id="{{ document.pk }}"
     data-prepare-url="{% url 'report_document_sign_prepare' document.pk %}"
     data-complete-url="{% url 'report_document_sign_complete' document.pk %}">

    <div style="margin-bottom:1rem;">
        <a href="/reports/" hx-get="/reports/" hx-target="#main-content" hx-push-url="/reports/" hx-indicator="#loader"
           style="font-size:0.8125rem; color:var(--color-muted-foreground); text-decoration:none;">← {% trans "Все отчёты" %}</a>
    </div>

    {% if sign_message %}
    <div style="margin-bottom:1rem; padding:0.65rem 0.9rem; border-radius:0.5rem; background:color-mix(in srgb, #16a34a 12%, var(--color-card)); border:1px solid color-mix(in srgb, #16a34a 30%, var(--color-border)); font-size:0.8125rem;">{{ sign_message }}</div>
    {% endif %}
    {% if sign_error %}
    <div style="margin-bottom:1rem; padding:0.65rem 0.9rem; border-radius:0.5rem; background:color-mix(in srgb, #dc2626 12%, var(--color-card)); border:1px solid color-mix(in srgb, #dc2626 30%, var(--color-border)); font-size:0.8125rem;">{{ sign_error }}</div>
    {% endif %}

    <div style="margin-bottom:1.25rem;">
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground); margin:0;">{% trans "Подпись КЕП" %}</h1>
        <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin:0.35rem 0 0; max-width:40rem;">
            {% trans "Ознакомлен и принял в работу" %} — {{ document.title }}
        </p>
    </div>

    <div style="display:grid; grid-template-columns:1fr; gap:1rem; max-width:44rem;">

        <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem;">
            <h2 style="font-size:0.9375rem; font-weight:600; margin:0 0 0.75rem;">{% trans "Статус" %}</h2>
            {% if kep_signature %}
            <div style="font-size:0.875rem; color:var(--color-foreground);">
                <span class="badge badge-success">{% trans "Подписано" %}</span>
                <div style="margin-top:0.5rem; color:var(--color-muted-foreground); font-size:0.8125rem;">
                    {{ kep_signature.cert_subject|default:kep_signature.signer.get_full_name|default:"—" }}
                    · {{ kep_signature.signed_at|date:"d.m.Y H:i" }}
                    {% if kep_signature.cert_serial %}
                    · СН {{ kep_signature.cert_serial }}
                    {% endif %}
                </div>
                <a href="{% url 'report_document_signed_download' document.pk kep_signature.pk %}"
                   class="btn btn-secondary" style="margin-top:0.75rem; font-size:0.8125rem;">{% trans "Скачать подписанный PDF" %}</a>
            </div>
            {% else %}
            <span class="badge badge-muted">{% trans "Не подписан" %}</span>
            {% endif %}
        </div>

        <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem;">
            <h2 style="font-size:0.9375rem; font-weight:600; margin:0 0 0.5rem;">{% trans "1. Скачайте PDF" %}</h2>
            <p style="font-size:0.8125rem; color:var(--color-muted-foreground); margin:0 0 0.75rem; line-height:1.45;">
                {% trans "Портал подготовит PDF для подписи. Ключ КЕП на сервер не передаётся." %}
            </p>
            <a href="{% url 'report_document_sign_prepare' document.pk %}"
               class="btn btn-primary" style="font-size:0.8125rem;" id="kep-download-pdf"
               data-kep-prepare>{% trans "Скачать PDF для подписи" %}</a>
            <div id="kep-sha-line" style="margin-top:0.5rem; font-size:0.7rem; color:var(--color-muted-foreground); word-break:break-all;"></div>
        </div>

        <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem;" id="kep-browser-block">
            <h2 style="font-size:0.9375rem; font-weight:600; margin:0 0 0.5rem;">{% trans "2. Подпись в браузере (ІІТ EndUser)" %}</h2>
            <p style="font-size:0.8125rem; color:var(--color-muted-foreground); margin:0 0 0.75rem; line-height:1.45;">
                {% trans "Если в системе установлены скрипты ІІТ EndUser (ключ ПриватБанка / файловый ключ / токен), можно подписать прямо здесь." %}
            </p>
            <div id="kep-enduser-status" style="font-size:0.8125rem; color:var(--color-muted-foreground); margin-bottom:0.75rem;">
                {% trans "Библиотека EndUser не обнаружена — используйте офлайн-подпись ниже." %}
            </div>
            <button type="button" class="btn btn-secondary" id="kep-browser-sign" style="font-size:0.8125rem;" disabled>
                {% trans "Подписать ключом в браузере" %}
            </button>
        </div>

        <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem;">
            <h2 style="font-size:0.9375rem; font-weight:600; margin:0 0 0.5rem;">{% trans "3. Офлайн: подписать и загрузить" %}</h2>
            <ol style="margin:0 0 0.875rem; padding-left:1.25rem; font-size:0.8125rem; color:var(--color-muted-foreground); line-height:1.55;">
                <li>{% trans "Откройте скачанный PDF в программе подписи (EUSignCP, «Підпис» ПриватБанка и т.п.)." %}</li>
                <li>{% trans "Подпишите своим КЕП (PAdES — подпись внутри PDF)." %}</li>
                <li>{% trans "Загрузите подписанный файл сюда." %}</li>
            </ol>
            <form method="post" action="{% url 'report_document_sign_complete' document.pk %}"
                  enctype="multipart/form-data" id="kep-offline-form"
                  style="display:flex; flex-direction:column; gap:0.65rem; margin:0;">
                {% csrf_token %}
                <input type="hidden" name="offline" value="1">
                <input type="hidden" name="content_sha256" id="kep-content-sha" value="">
                <label style="font-size:0.75rem; color:var(--color-muted-foreground);">
                    {% trans "Подписанный PDF" %}
                    <input type="file" name="file" required accept=".pdf,application/pdf"
                           style="display:block; margin-top:0.25rem; font-size:0.8125rem; max-width:100%;">
                </label>
                <label style="font-size:0.75rem; color:var(--color-muted-foreground);">
                    {% trans "ФИО из сертификата (если известно)" %}
                    <input type="text" name="cert_subject" class="input" maxlength="500"
                           placeholder="{% trans 'Например: Иванов Иван Иванович' %}"
                           style="margin-top:0.25rem; font-size:0.8125rem;">
                </label>
                <label style="font-size:0.75rem; color:var(--color-muted-foreground);">
                    {% trans "Серийный номер сертификата (необязательно)" %}
                    <input type="text" name="cert_serial" class="input" maxlength="120"
                           style="margin-top:0.25rem; font-size:0.8125rem;">
                </label>
                <button type="submit" class="btn btn-primary" style="font-size:0.8125rem; align-self:flex-start;">
                    {% trans "Загрузить подпись" %}
                </button>
            </form>
        </div>

        {% if kep_history %}
        <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem;">
            <h2 style="font-size:0.9375rem; font-weight:600; margin:0 0 0.75rem;">{% trans "История подписей" %}</h2>
            <ul style="margin:0; padding:0; list-style:none; font-size:0.8125rem;">
                {% for s in kep_history %}
                <li style="padding:0.4rem 0; border-top:1px solid var(--color-border); display:flex; justify-content:space-between; gap:0.75rem; flex-wrap:wrap;">
                    <span>
                        {{ s.cert_subject|default:s.signer.get_full_name|default:"—" }}
                        <span style="color:var(--color-muted-foreground);">· {{ s.signed_at|date:"d.m.Y H:i" }}</span>
                    </span>
                    <a href="{% url 'report_document_signed_download' document.pk s.pk %}"
                       style="color:var(--color-primary); text-decoration:none;">{% trans "PDF" %}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>
<script src="/static/assets/js/kep-sign.js"></script>