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

{% block title %}{{ 'admin.modules_information.photopea'|trans }}{% endblock %}

{% block body %}
<script type="application/json" id="tf-photopea-config">{{ photopeaClientConfig|json_encode|raw }}</script>

<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="admin-card p-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                    <div>
                        <h2 class="gradient-text fw-bold mb-2">
                            <i class="bi bi-brush me-3"></i>
                            {{ 'admin.photopea.title'|trans }}
                        </h2>
                        <p class="text-muted mb-0">{{ 'admin.photopea.lead'|trans }}</p>
                    </div>
                    <a href="{{ path('app_admin_modules') }}" class="btn btn-outline-secondary btn-lg">
                        <i class="bi bi-arrow-left me-2"></i>
                        {{ 'admin.page.back'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-12 col-lg-4">
            <div class="admin-card p-4 h-100">
                <h4 class="gradient-text fw-bold mb-3">
                    <i class="bi bi-folder2-open me-2"></i>
                    {{ 'admin.photopea.select_label'|trans }}
                </h4>
                <p class="text-muted small mb-3">{{ 'admin.photopea.hint_formats'|trans }}</p>
                {% if not canSaveToMedia %}
                    <div class="alert alert-warning small mb-3">{{ 'admin.photopea.hint_save_permission'|trans }}</div>
                {% endif %}
                <div class="mb-3">
                    <input type="search" class="form-control" id="tf-photopea-search" placeholder="{{ 'admin.photopea.search_placeholder'|trans }}" autocomplete="off">
                </div>
                <div class="mb-3">
                    <select class="form-select form-select-lg" id="tf-photopea-select" size="8" aria-label="{{ 'admin.photopea.select_label'|trans }}"></select>
                </div>
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="tf-photopea-prev" disabled>{{ 'admin.photopea.prev_page'|trans }}</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="tf-photopea-next" disabled>{{ 'admin.photopea.next_page'|trans }}</button>
                    </div>
                    <span class="small text-muted" id="tf-photopea-pageinfo"></span>
                </div>
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-primary btn-lg" id="tf-photopea-load" disabled>
                        <i class="bi bi-box-arrow-in-right me-2"></i>{{ 'admin.photopea.btn_load'|trans }}
                    </button>
                    <button type="button" class="btn btn-success btn-lg" id="tf-photopea-save" disabled>
                        <i class="bi bi-cloud-upload me-2"></i>{{ 'admin.photopea.btn_save'|trans }}
                    </button>
                    <a href="#" class="btn btn-outline-secondary d-none" id="tf-photopea-open-media" target="_blank" rel="noopener">
                        <i class="bi bi-image me-2"></i>{{ 'admin.photopea.open_in_media'|trans }}
                    </a>
                </div>
                <p class="small text-muted mt-3 mb-0" id="tf-photopea-status">{{ 'admin.photopea.status_loading_list'|trans }}</p>
            </div>
        </div>
        <div class="col-12 col-lg-8">
            <div class="admin-card p-2 p-md-3">
                <h4 class="gradient-text fw-bold mb-3 px-2">
                    <i class="bi bi-window-desktop me-2"></i>
                    {{ 'admin.photopea.editor_title'|trans }}
                </h4>
                <div class="ratio ratio-4x3 border rounded overflow-hidden bg-dark bg-opacity-10" style="min-height: 480px;">
                    <iframe id="tf-photopea-frame" title="Photopea" class="w-100 h-100 border-0" src="{{ photopeaOrigin }}/" referrerpolicy="strict-origin-when-cross-origin" allow="clipboard-read; clipboard-write"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/admin/photopea-module.js') }}" defer></script>
{% endblock %}