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

{% block title %}{{ 'sign.title'|trans }}{% endblock %}
{% block footer %}{% endblock %}

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

{% block body %}
<div class="sign-page">
    <div class="container sign-container">
        <div class="sign-header">
            <h1 class="sign-header__title">{{ 'sign.yourDocuments'|trans }}</h1>
            <div class="sign-status-cards">
                <a href="{{ path('app_sign_index', {filter: 'waiting'}) }}" class="sign-status-card{% if filter == 'waiting' %} is-active{% endif %}">
                    <div class="sign-status-card__count">{{ counts.waiting }}</div>
                    <div class="sign-status-card__label">
                        <span class="sign-dot sign-dot--waiting"></span>
                        {{ 'sign.status.waiting'|trans }}
                    </div>
                </a>
                <a href="{{ path('app_sign_index', {filter: 'action_required'}) }}" class="sign-status-card{% if filter == 'action_required' %} is-active{% endif %}">
                    <div class="sign-status-card__count">{{ counts.action_required }}</div>
                    <div class="sign-status-card__label">
                        <span class="sign-dot sign-dot--action"></span>
                        {{ 'sign.status.actionRequired'|trans }}
                    </div>
                </a>
                <a href="{{ path('app_sign_index', {filter: 'completed'}) }}" class="sign-status-card{% if filter == 'completed' %} is-active{% endif %}">
                    <div class="sign-status-card__count">{{ counts.completed }}</div>
                    <div class="sign-status-card__label">
                        <span class="sign-dot sign-dot--done"></span>
                        {{ 'sign.status.completed'|trans }}
                    </div>
                </a>
            </div>
        </div>

        <section class="sign-upload" aria-label="{{ 'sign.uploadZone'|trans }}">
            <h2 class="sign-section-title">{{ 'sign.getStarted'|trans }}</h2>
            <form class="sign-dropzone" id="signDropzone" method="post" action="{{ path('app_sign_upload') }}" enctype="multipart/form-data">
                <input type="file" name="pdf" id="signPdfInput" accept="application/pdf,.pdf" hidden>
                <div class="sign-dropzone__inner">
                    <div class="sign-dropzone__icon" aria-hidden="true">↓</div>
                    <p class="sign-dropzone__text">{{ 'sign.dropHint'|trans }}</p>
                    <button type="button" class="button button-blue" id="signSelectPdfBtn">{{ 'sign.selectPdf'|trans }}</button>
                    <p class="sign-dropzone__hint">{{ 'sign.pdfOnly'|trans }}</p>
                </div>
            </form>
            <p class="sign-autosave-hint">{{ 'sign.draftAutosaveHint'|trans }}</p>
        </section>

        <section class="sign-list-section">
            <div class="sign-list-header">
                <h2 class="sign-section-title mb-0">{{ 'sign.documents'|trans }}</h2>
                <div class="sign-filters" role="tablist">
                    <a href="{{ path('app_sign_index', {filter: 'all'}) }}" class="sign-filter{% if filter == 'all' %} is-active{% endif %}">{{ 'sign.filter.all'|trans }}</a>
                    <a href="{{ path('app_sign_index', {filter: 'waiting'}) }}" class="sign-filter{% if filter == 'waiting' %} is-active{% endif %}">{{ 'sign.status.waiting'|trans }}</a>
                    <a href="{{ path('app_sign_index', {filter: 'action_required'}) }}" class="sign-filter{% if filter == 'action_required' %} is-active{% endif %}">{{ 'sign.status.actionRequired'|trans }}</a>
                    <a href="{{ path('app_sign_index', {filter: 'completed'}) }}" class="sign-filter{% if filter == 'completed' %} is-active{% endif %}">{{ 'sign.status.completed'|trans }}</a>
                </div>
            </div>

            {% if documents is empty %}
                <div class="sign-empty">
                    <p>{{ 'sign.emptyList'|trans }}</p>
                </div>
            {% else %}
                <div class="sign-table-wrap">
                    <table class="sign-table">
                        <thead>
                        <tr>
                            <th>{{ 'sign.col.document'|trans }}</th>
                            <th>{{ 'sign.col.status'|trans }}</th>
                            <th>{{ 'sign.col.updated'|trans }}</th>
                            <th>{{ 'sign.col.signers'|trans }}</th>
                            <th>{{ 'sign.col.sender'|trans }}</th>
                            <th>{{ 'sign.col.actions'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for document in documents %}
                            <tr>
                                <td>
                                    <a class="sign-doc-link" href="{{ path('app_sign_show', {id: document.id}) }}">{{ document.title }}</a>
                                </td>
                                <td>
                                    {% set status = document.status %}
                                    <span class="sign-status-pill sign-status-pill--{{ status }}">
                                        <span class="sign-dot sign-dot--{{ status == 'waiting' ? 'waiting' : (status == 'action_required' ? 'action' : (status == 'completed' ? 'done' : 'draft')) }}"></span>
                                        {% if status == 'waiting' %}{{ 'sign.status.waiting'|trans }}
                                        {% elseif status == 'action_required' %}{{ 'sign.status.actionRequired'|trans }}
                                        {% elseif status == 'completed' %}{{ 'sign.status.completed'|trans }}
                                        {% elseif status == 'draft' %}{{ 'sign.status.draft'|trans }}
                                        {% else %}{{ status }}{% endif %}
                                    </span>
                                </td>
                                <td>{{ document.updatedAt|date('d.m.Y H:i') }}</td>
                                <td>{{ document.signerEmails ?: '—' }}</td>
                                <td>{{ 'sign.you'|trans }}</td>
                                <td>
                                    <div class="sign-actions">
                                        {% if document.status == 'draft' %}
                                            <a class="sign-action-link" href="{{ path('app_sign_prepare', {id: document.id}) }}">{{ 'sign.open'|trans }}</a>
                                        {% else %}
                                            <a class="sign-action-link" href="{{ path('app_sign_show', {id: document.id}) }}">{{ 'sign.open'|trans }}</a>
                                        {% endif %}
                                        {% if document.status in ['waiting', 'action_required'] %}
                                            <a class="sign-action-link" href="{{ path('app_sign_remind', {id: document.id}) }}">{{ 'sign.sendReminder'|trans }}</a>
                                        {% endif %}
                                        {% if document.status == 'completed' %}
                                            <a class="sign-action-link" href="{{ path('app_sign_download', {id: document.id}) }}">{{ 'sign.downloadSigned'|trans }}</a>
                                            <a class="sign-action-link" href="{{ path('app_sign_certificate', {id: document.id}) }}">{{ 'sign.downloadCertificate'|trans }}</a>
                                        {% endif %}
                                        <div class="dropdown d-inline-block">
                                            <button
                                                class="sign-more-btn"
                                                type="button"
                                                data-bs-toggle="dropdown"
                                                data-bs-popper-config='{"strategy":"fixed"}'
                                                aria-expanded="false"
                                                aria-label="{{ 'sign.moreActions'|trans }}"
                                            >⋯</button>
                                            <ul class="dropdown-menu dropdown-menu-end sign-actions-dropdown">
                                                {% if document.status == 'draft' %}
                                                    <li><a class="dropdown-item" href="{{ path('app_sign_review', {id: document.id}) }}">{{ 'sign.reviewAndSend'|trans }}</a></li>
                                                {% endif %}
                                                <li>
                                                    <form method="post" action="{{ path('app_sign_delete', {id: document.id}) }}" onsubmit="return confirm('{{ 'sign.confirmDelete'|trans|e('js') }}');">
                                                        <input type="hidden" name="_token" value="{{ csrf_token('sign_delete_' ~ document.id) }}">
                                                        <button type="submit" class="dropdown-item text-danger">{{ 'lang.delete'|trans }}</button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </section>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('sign') }}
{% endblock %}