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

{% block title %}{{ 'sign.guest.signTitle'|trans }} — {{ document.title }}{% endblock %}
{% block footer %}{% endblock %}

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

{% block body %}
<div class="sign-guest" id="signGuestApp"
     data-pdf-url="{{ path('app_sign_guest_pdf', {_locale: app.request.locale, token: token}) }}"
     data-incomplete="{{ 'sign.error.fieldsIncomplete'|trans|e('html_attr') }}"
     data-label-signature="{{ 'sign.field.signature'|trans|e('html_attr') }}"
     data-label-date="{{ 'sign.field.date'|trans|e('html_attr') }}"
     data-label-text="{{ 'sign.field.text'|trans|e('html_attr') }}">
    <header class="sign-guest__top">
        <div>
            <h1 class="sign-guest__title">{{ document.title }}</h1>
            <p class="sign-guest__sub">{{ 'sign.guest.signHelp'|trans }}</p>
        </div>
        <button type="button" class="button button-blue" id="signGuestFinishBtn">{{ 'sign.guest.finish'|trans }}</button>
    </header>

    <div class="sign-guest__workspace">
        <div class="sign-pdf-loading" id="signGuestLoading">{{ 'sign.loadingPdf'|trans }}</div>
        <div class="sign-pdf-pages" id="signGuestPages" hidden></div>
    </div>

    <form method="post" id="signGuestSubmitForm" class="d-none">
        <input type="hidden" name="payload" id="signGuestPayload">
    </form>
</div>

<script type="application/json" id="signGuestFields">{{ fieldsJson|json_encode|raw }}</script>

<div class="modal fade" id="signatureModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content sign-modal">
            <div class="modal-header">
                <h2 class="modal-title fs-5">{{ 'sign.guest.createSignature'|trans }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="sign-toggle mb-3">
                    <label class="sign-toggle__option">
                        <input type="radio" name="sig_mode" value="typed" checked>
                        <span>{{ 'sign.guest.sigType'|trans }}</span>
                    </label>
                    <label class="sign-toggle__option">
                        <input type="radio" name="sig_mode" value="draw">
                        <span>{{ 'sign.guest.sigDraw'|trans }}</span>
                    </label>
                </div>
                <div id="sigTypedWrap">
                    <label class="sign-label" for="sigTyped">{{ 'sign.guest.yourName'|trans }}</label>
                    <input class="form-control sign-input" id="sigTyped" value="{{ signer.displayName }}">
                    <div class="sign-sig-preview" id="sigTypedPreview">{{ signer.displayName }}</div>
                </div>
                <div id="sigDrawWrap" hidden>
                    <canvas id="sigCanvas" width="420" height="160"></canvas>
                    <button type="button" class="sign-link-btn mt-2" id="sigClearBtn">{{ 'sign.clearAll'|trans }}</button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="button" data-bs-dismiss="modal">{{ 'lang.cancel'|default('Abbrechen')|trans }}</button>
                <button type="button" class="button button-blue" id="sigApplyBtn">{{ 'sign.guest.applySignature'|trans }}</button>
            </div>
        </div>
    </div>
</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_guest') }}
{% endblock %}