{% extends 'base.html.twig' %}

{% block title %}{{ document.title }}{% endblock %}
{% block footer %}{% endblock %}

{% block styles %}
    {{ parent() }}
    {{ encore_entry_link_tags('sign') }}
{% endblock %}

{% block body %}
<div class="sign-prepare" id="signShowApp"
     data-pdf-url="{{ path('app_sign_pdf', {id: document.id}) }}">
    <header class="sign-prepare__top">
        <a class="sign-prepare__close" href="{{ path('app_sign_index') }}">×</a>
        <div>
            <h1 class="sign-show-title">{{ document.title }}</h1>
            <p class="sign-help mb-0">{{ 'sign.sentBy'|trans }} {{ document.createdBy.email }}</p>
            <p class="sign-show-status mb-0">
                {% if document.status == 'waiting' %}{{ 'sign.status.waiting'|trans }}
                {% elseif document.status == 'action_required' %}{{ 'sign.status.actionRequired'|trans }}
                {% elseif document.status == 'completed' %}{{ 'sign.status.completed'|trans }}
                {% elseif document.status == 'draft' %}{{ 'sign.status.draft'|trans }}
                {% else %}{{ document.status }}{% endif %}
            </p>
        </div>
        <div class="sign-prepare__meta">
            {% if document.status == 'draft' %}
                <a class="button button-blue" href="{{ path('app_sign_prepare', {id: document.id}) }}">{{ 'sign.continueDraft'|trans }}</a>
            {% else %}
                {% if selfSigner and selfSigner.status != 'signed' %}
                    <a class="button button-orange" href="{{ path('app_sign_guest_sign', {_locale: app.request.locale, token: selfSigner.accessToken}) }}">
                        {{ 'sign.signNow'|trans }}
                    </a>
                {% endif %}
                {% if document.status in ['waiting', 'action_required'] and hasPendingOthers %}
                    <a class="button" href="{{ path('app_sign_remind', {id: document.id}) }}">{{ 'sign.sendReminder'|trans }}</a>
                {% endif %}
                {% if canEditSent %}
                    <a class="button" href="{{ path('app_sign_prepare', {id: document.id, step: 3}) }}">{{ 'sign.editFields'|trans }}</a>
                {% endif %}
                {% if document.status == 'completed' %}
                    <a class="button button-blue" href="{{ path('app_sign_download', {id: document.id}) }}">
                        {{ 'sign.downloadSigned'|trans }}
                    </a>
                    <a class="button" href="{{ path('app_sign_certificate', {id: document.id}) }}">
                        {{ 'sign.downloadCertificate'|trans }}
                    </a>
                {% elseif document.status != 'draft' %}
                    <p class="sign-help mb-0">{{ 'sign.downloadsWhenComplete'|trans }}</p>
                {% endif %}
            {% endif %}
        </div>
    </header>

    <main class="sign-prepare__workspace sign-show-workspace">
        <section class="sign-signer-status" aria-label="{{ 'sign.signers'|trans }}">
            <h2 class="sign-section-title">{{ 'sign.signerOverview'|trans }}</h2>
            <ul class="sign-signer-status__list">
                {% for signer in document.signers %}
                    <li class="sign-signer-status__item" style="--signer-color: {{ signer.color }}">
                        <span class="sign-chip__dot"></span>
                        <div class="sign-signer-status__meta">
                            <strong>
                                {{ signer.displayName }}
                                {% if signer.isSelf %} <span class="sign-chip__you">({{ 'sign.you'|trans }})</span>{% endif %}
                            </strong>
                            <span class="sign-signer-status__email">{{ signer.email }}</span>
                        </div>
                        <span class="sign-signer-status__badge sign-signer-status__badge--{{ signer.status }}">
                            {% if signer.status == 'signed' %}{{ 'sign.signerStatus.signed'|trans }}
                            {% elseif signer.status == 'viewed' %}{{ 'sign.signerStatus.viewed'|trans }}
                            {% elseif signer.status == 'authenticated' %}{{ 'sign.signerStatus.authenticated'|trans }}
                            {% elseif signer.status == 'declined' %}{{ 'sign.signerStatus.declined'|trans }}
                            {% else %}{{ 'sign.signerStatus.pending'|trans }}{% endif %}
                        </span>
                        {% if signer.signedAt %}
                            <span class="sign-signer-status__when">{{ signer.signedAt|date('d.m.Y H:i') }}</span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
            {% if selfSigner and selfSigner.status != 'signed' and document.status != 'draft' %}
                <p class="sign-help mt-2">{{ 'sign.selfSignHelp'|trans }}</p>
            {% endif %}
        </section>

        <div class="sign-pdf-frame mt-3" id="signShowPdfFrame">
            <div class="sign-pdf-loading" id="signShowLoading">{{ 'sign.loadingPdf'|trans }}</div>
            <div class="sign-pdf-pages" id="signShowPages" hidden></div>
        </div>
        <script type="application/json" id="signShowFields">{{ fieldsJson|json_encode|raw }}</script>
        {% if document.status != 'completed' %}
            <p class="sign-help text-center mt-2">{{ 'sign.viewOverlayHint'|trans }}</p>
        {% endif %}

        <details class="sign-details mt-3">
            <summary>{{ 'sign.details'|trans }}</summary>
            <ul>
                <li>{{ 'sign.documentId'|trans }}: {{ document.publicId }}</li>
                <li>{{ 'sign.col.status'|trans }}: {{ document.status }}</li>
                <li>{{ 'sign.hash'|trans }}: {{ document.fileHash ?: '—' }}</li>
                {% for event in document.events %}
                    <li>{{ event.createdAt|date('d.m.Y H:i:s T') }} — {{ event.eventType }}{% if event.details %} ({{ event.details }}){% endif %}</li>
                {% endfor %}
            </ul>
        </details>
    </main>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        if (window.pdfjsLib) {
            window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        }
    </script>
    {{ encore_entry_script_tags('sign') }}
{% endblock %}