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

{% block title %}{{ 'admin.reference_codes.title'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h1 class="h3 mb-1">{{ 'admin.reference_codes.title'|trans }}</h1>
                        <p class="text-muted mb-0">{{ 'admin.reference_codes.description'|trans }}</p>
                    </div>
                </div>

                <div class="row g-4">
                    <!-- Contact Form -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-chat-dots text-primary me-2"></i>
                                    {{ 'admin.reference_codes.contact_form'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">{{ 'admin.reference_codes.contact_form_description'|trans }}</p>
                                <div class="code-block">
                                    <code class="twig-syntax">&#123;&#123; contact_form() &#125;&#125;</code>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-sm btn-outline-primary copy-btn" data-code="{{ '{{ contact_form() }}' }}">
                                    <i class="bi bi-clipboard"></i> {{ 'admin.copy_reference'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Media URL -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-image text-success me-2"></i>
                                    {{ 'admin.reference_codes.media_url'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">{{ 'admin.reference_codes.media_url_description'|trans }}</p>
                                <div class="code-block">
                                    <code class="twig-syntax">&#123;&#123; media_url(1) &#125;&#125;</code>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-sm btn-outline-primary copy-btn" data-code="{{ '{{ media_url(1) }}' }}">
                                    <i class="bi bi-clipboard"></i> {{ 'admin.copy_reference'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Current Date -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-calendar text-info me-2"></i>
                                    {{ 'admin.reference_codes.current_date'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">{{ 'admin.reference_codes.current_date_description'|trans }}</p>
                                <div class="code-block">
                                    <code class="twig-syntax">&#123;&#123; current_date("Y-m-d") &#125;&#125;</code>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-sm btn-outline-primary copy-btn" data-code="{{ '{{ current_date("Y-m-d") }}' }}">
                                    <i class="bi bi-clipboard"></i> {{ 'admin.copy_reference'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Translate Text -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-translate text-warning me-2"></i>
                                    {{ 'admin.reference_codes.translate_text'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">{{ 'admin.reference_codes.translate_text_description'|trans }}</p>
                                <div class="code-block">
                                    <code class="twig-syntax">&#123;&#123; translate_text("welcome_message") &#125;&#125;</code>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-sm btn-outline-primary copy-btn" data-code="{{ '{{ translate_text("welcome_message") }}' }}">
                                    <i class="bi bi-clipboard"></i> {{ 'admin.copy_reference'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- QR Code URL -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-qr-code text-danger me-2"></i>
                                    {{ 'admin.reference_codes.qr_code_url'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">{{ 'admin.reference_codes.qr_code_url_description'|trans }}</p>
                                <div class="code-block">
                                    <code class="twig-syntax">&#123;&#123; qr_code_url("https://example.com") &#125;&#125;</code>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-sm btn-outline-primary copy-btn" data-code="{{ '{{ qr_code_url("https://example.com") }}' }}">
                                    <i class="bi bi-clipboard"></i> {{ 'admin.copy_reference'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Page Route -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-file-text text-secondary me-2"></i>
                                    {{ 'admin.reference_codes.page_route'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">{{ 'admin.reference_codes.page_route_description'|trans }}</p>
                                <div class="code-block">
                                    <code class="twig-syntax">&#123;&#123; page_route(1) &#125;&#125;</code>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-sm btn-outline-primary copy-btn" data-code="{{ '{{ page_route(1) }}' }}">
                                    <i class="bi bi-clipboard"></i> {{ 'admin.copy_reference'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Category Route -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-folder text-primary me-2"></i>
                                    {{ 'admin.reference_codes.category_route'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">{{ 'admin.reference_codes.category_route_description'|trans }}</p>
                                <div class="code-block">
                                    <code class="twig-syntax">&#123;&#123; category_route(1) &#125;&#125;</code>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-sm btn-outline-primary copy-btn" data-code="{{ '{{ category_route(1) }}' }}">
                                    <i class="bi bi-clipboard"></i> {{ 'admin.copy_reference'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Usage Information -->
                <div class="row mt-5">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-info-circle text-info me-2"></i>
                                    {{ 'admin.reference_codes.usage_info'|trans }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>{{ 'admin.reference_codes.how_to_use'|trans }}</h6>
                                        <ul class="list-unstyled">
                                            <li><i class="bi bi-check-circle text-success me-2"></i>{{ 'admin.reference_codes.usage_step_1'|trans }}</li>
                                            <li><i class="bi bi-check-circle text-success me-2"></i>{{ 'admin.reference_codes.usage_step_2'|trans }}</li>
                                            <li><i class="bi bi-check-circle text-success me-2"></i>{{ 'admin.reference_codes.usage_step_3'|trans }}</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>{{ 'admin.reference_codes.examples'|trans }}</h6>
                                        <div class="code-block">
                                            <pre class="mb-0"><code class="twig-syntax">// {{ 'admin.reference_codes.example_1'|trans }}
&#123;&#123; contact_form() &#125;&#125;

// {{ 'admin.reference_codes.example_2'|trans }}
&lt;img src="&#123;&#123; media_url(1) &#125;&#125;" alt="Logo"&gt;

// {{ 'admin.reference_codes.example_3'|trans }}
&lt;p&gt;&#123;&#123; translate_text("welcome_message") &#125;&#125;&lt;/p&gt;</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .code-block {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 16px;
            margin: 8px 0;
            position: relative;
            overflow: hidden;
        }
        
        .code-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #007bff, #6610f2, #6f42c1);
        }
        
        .twig-syntax {
            font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
            font-size: 14px;
            line-height: 1.5;
            color: #2d3748;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
        }
        
        .code-block pre {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
            font-size: 13px;
            line-height: 1.6;
        }
        
        .code-block pre code {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            color: #2d3748;
        }
        
        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .code-block {
                background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
                border-color: #4a5568;
            }
            
            .twig-syntax,
            .code-block pre code {
                color: #e2e8f0;
            }
        }
        
        /* Hover effects */
        .code-block:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
        }
        
        /* Copy button improvements */
        .btn-outline-primary:hover {
            background: linear-gradient(135deg, #007bff, #6610f2);
            border-color: transparent;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add click event listeners to all copy buttons
            document.querySelectorAll('.copy-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const code = this.getAttribute('data-code');
                    copyToClipboard(code);
                });
            });
        });

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                if (window.adminNotifications) {
                    window.adminNotifications.success(
                        '{{ "admin.reference_codes.copied"|trans }}',
                        '{{ "admin.reference_codes.copied_message"|trans }}',
                        { duration: 2000 }
                    );
                }
            }).catch(function(err) {
                console.error('Could not copy text: ', err);
                if (window.adminNotifications) {
                    window.adminNotifications.error(
                        '{{ "admin.reference_codes.copy_error"|trans }}',
                        '{{ "admin.reference_codes.copy_error_message"|trans }}',
                        { duration: 3000 }
                    );
                }
            });
        }
    </script>
{% endblock %}