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

{% block title %}{{ 'travels.title'|trans }} | Saúl Morales Pacheco{% endblock %}

{% block meta_description %}{{ 'travels.description'|trans }}{% endblock %}

{% block body %}
    {# Navigation with language switcher #}
    {% include 'partials/_nav.html.twig' %}

    {# Travels Section #}
    <section class="donation" id="travels">
        <div class="donation__container">
            <header class="donation__header">
                <h1 class="donation__title">
                    {{ 'travels.title'|trans }} <em>{{ 'travels.subtitle'|trans }}</em>
                </h1>
                <p class="donation__intro">
                    {{ 'travels.intro'|trans }}
                </p>
            </header>

            <form class="donation__form" id="travels-form" novalidate>
                <div class="donation__form-group">
                    <label class="donation__label" for="currency">
                        {{ 'travels.currency_label'|trans }}
                    </label>
                    <select
                        name="currency"
                        id="currency"
                        class="donation__select"
                        data-currency="{{ currency }}">
                        <option value="USD" {% if currency == 'USD' %}selected{% endif %}>USD - US Dollar</option>
                        <option value="COP" {% if currency == 'COP' %}selected{% endif %}>COP - Peso Colombiano</option>
                    </select>
                    <p class="donation__hint" id="currency-hint">
                        {{ currency == 'USD' ? 'travels.min_usd'|trans : 'travels.min_cop'|trans }}
                    </p>
                </div>

                <div class="donation__form-group">
                    <label class="donation__label" for="amount">
                        {{ 'travels.amount_label'|trans }}
                    </label>
                    <input
                        type="number"
                        name="amount"
                        id="amount"
                        class="donation__input"
                        placeholder="{{ 'travels.amount_placeholder'|trans }}"
                        value="{{ amount }}"
                        min="{{ currency == 'USD' ? '2' : '20000' }}"
                        max="{{ currency == 'USD' ? '1320' : '' }}"
                        step="{{ currency == 'USD' ? '1' : '1000' }}"
                        required>
                </div>

                <button type="submit" class="donation__submit" id="travels-submit">
                    <i class="fa fa-plane"></i>
                    {{ 'travels.submit'|trans }}
                </button>

                <p class="donation__privacy">
                    {{ 'travels.privacy'|trans }}
                </p>
            </form>

            <footer class="donation__footer">
                <p class="donation__thank-you">
                    {{ 'travels.thank_you'|trans }} ✈️
                </p>
            </footer>
        </div>
    </section>

    {# Footer #}
    {% include 'partials/_footer.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://checkout.epayco.co/checkout-v2.js"></script>
    <script src="{{ asset('js/travels.js') }}"></script>
    <script>
        // Auto-submit si vienen parámetros en URL
        const autoSubmit = {{ auto_submit ? 'true' : 'false' }};

        // Pasar al JavaScript del módulo
        window.travelsAutoSubmit = autoSubmit;
    </script>
{% endblock %}