{% extends '@App/app.html.twig' %}

{% block title %}Signer le document{% endblock %}

{% block content %}
    <div class="flow-wizard__shell">
        <div class="flow-wizard__header">
            <div>
                <p class="flow-wizard__eyebrow">Signature électronique interne</p>
                <h1>Signer le document</h1>
                <p>Validez votre consentement, confirmez par curseur puis saisissez le code reçu par email.</p>
            </div>
            <span class="flow-wizard__badge">{{ request.status|replace({'_': ' '}) }}</span>
        </div>

        <div class="flow-wizard__card">
            <div class="flow-wizard__card-header">
                <div>
                    <h2>{{ request.targetType|capitalize }} #{{ request.targetId }}</h2>
                    <p>Hash source : <code>{{ request.documentHash|slice(0, 16) }}</code></p>
                </div>
                <span class="flow-wizard__badge">Expire le {{ request.expiresAt ? request.expiresAt|date('d/m/Y H:i') : '—' }}</span>
            </div>
            <div class="flow-wizard__body">
                <div class="signature-panel">
                    <div class="signature-panel__preview">
                        <i class="ti ti-file-text" aria-hidden="true"></i>
                        <strong>Aperçu du document</strong>
                        <span>{{ request.documentPath|split('/')|last }}</span>
                    </div>

                    {% if challenge %}
                        {% include '@Signature/signature/_otp_form.html.twig' with {request: request, challenge: challenge} %}
                    {% elseif request.isSignable %}
                        <form method="post" action="{{ path('signature_prepare', {token: request.token}) }}" data-controller="signature-document-pad signature-upload signature-slider" data-signature-document-pad-script-src-value="{{ asset('vendor/matdash/libs/signaturepad/signaturepad.js') }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('signature_prepare_' ~ request.token) }}">
                            <input type="hidden" name="signature_mode" value="drawn" data-signature-upload-target="mode">
                            <input type="hidden" name="signature_base64" data-signature-document-pad-target="input" data-signature-upload-target="input" data-signature-slider-target="signature">

                            <label class="signature-consent">
                                <input type="checkbox" name="acceptance" value="1" required data-signature-slider-target="acceptance">
                                <span>J'accepte de signer ce document avec une signature électronique simple interne et un dossier de preuve. Cette signature n'est pas présentée comme une signature qualifiée eIDAS.</span>
                            </label>

                            <div class="signature-tabs">
                                <label><input type="radio" name="signature_tab" value="drawn" checked data-action="signature-upload#switchMode"> Dessiner</label>
                                <label><input type="radio" name="signature_tab" value="uploaded" data-action="signature-upload#switchMode"> Importer</label>
                            </div>

                            {% include '@Signature/signature/_signature_pad.html.twig' %}
                            {% include '@Signature/signature/_signature_upload.html.twig' %}
                            {% include '@Signature/signature/_signature_slider.html.twig' %}
                        </form>
                    {% else %}
                        <div class="alert alert-warning mb-0">Cette demande ne peut plus être signée.</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <form method="post" action="{{ path('signature_refuse', {token: request.token}) }}" class="flow-wizard__card mt-4">
            <div class="flow-wizard__body">
                <label class="flow-wizard__label" for="signature_refusal_reason">Refuser la signature</label>
                <textarea class="form-control" id="signature_refusal_reason" name="reason" rows="3" placeholder="Motif du refus"></textarea>
                <input type="hidden" name="_token" value="{{ csrf_token('signature_refuse_' ~ request.token) }}">
            </div>
            <div class="flow-wizard__footer">
                <button class="btn btn-outline-danger">Refuser le document</button>
            </div>
        </form>
    </div>
{% endblock %}