{% extends "layouts/base.html" %}
{% load i18n widget_tweaks %}

{% block extrahead %}
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
<style>
    .dashboard-bg {
        background:
            radial-gradient(circle at top left, rgba(13, 202, 240, 0.18), transparent 60%),
            radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.25), transparent 55%),
            #050814;
        color: #e9ecef;
        padding: 56px 0;
        min-height: 100vh;
    }

    .dashboard-card {
        background: radial-gradient(circle at top, rgba(8, 15, 40, 0.98), rgba(3, 7, 22, 0.98));
        border: 1px solid rgba(13, 202, 240, 0.3);
        border-radius: 18px;
        box-shadow:
            0 0 40px rgba(13, 202, 240, 0.15),
            0 0 80px rgba(111, 66, 193, 0.25);
        color: #f8f9fa;
        backdrop-filter: blur(16px);
    }

    .card-header-styled {
        background: linear-gradient(120deg, #020617, #111827, #0dcaf0);
        color: #fff;
        font-family: 'Orbitron', sans-serif;
        border-bottom: 1px solid rgba(13, 202, 240, 0.5);
        padding: 1.6rem 1.8rem;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    }

    .card-header-styled h3 {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        color: #ffffff;  /* título sempre branco, inclusive o ID */
    }

    .form-control-glass {
        background: rgba(15, 23, 42, 0.85);
        border: 1px solid rgba(148, 163, 184, 0.45);
        color: #e5e7eb;
        border-radius: 10px;
        padding: 0.8rem 1rem;
        transition: all 0.25s ease;
        font-size: 0.98rem;
    }

    .form-control-glass:focus {
        background: rgba(15, 23, 42, 0.98);
        border-color: #0dcaf0;
        box-shadow: 0 0 0 1px rgba(13, 202, 240, 0.6);
        color: #f9fafb;
    }

    .form-control-glass::placeholder {
        color: rgba(148, 163, 184, 0.7);
    }

    .action-btn {
        background: linear-gradient(135deg, #38bdf8, #6366f1);
        border: none;
        border-radius: 999px;
        color: white;
        font-weight: 600;
        padding: 0.9rem 2.6rem;
        transition: all 0.25s ease;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow:
            0 10px 30px rgba(56, 189, 248, 0.55),
            0 0 22px rgba(129, 140, 248, 0.85);
        font-size: 0.98rem;
    }

    .action-btn:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow:
            0 18px 44px rgba(56, 189, 248, 0.8),
            0 0 30px rgba(129, 140, 248, 1);
        color: white;
    }

    .alert-info-custom {
        background: linear-gradient(135deg, rgba(13, 202, 240, 0.14), rgba(37, 99, 235, 0.16));
        border: 1px solid rgba(129, 230, 217, 0.45);
        border-radius: 14px;
        color: #e0f2fe;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.85);
    }

    .form-label-glow {
        color: #7dd3fc;
        text-transform: uppercase;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        margin-bottom: 0.55rem;
    }

    .hint-text {
        color: rgba(148, 163, 184, 0.9);
        font-size: 0.86rem;
    }

    .section-divider {
        border-top: 1px dashed rgba(148, 163, 184, 0.4);
        margin: 1.5rem 0 1.25rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-bg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-7">
                <div class="dashboard-card">
                    <div class="card-header-styled">
                        <h3 class="mb-0 card-title-orbit text-shadow">
                            <i class="fas fa-file-signature me-3 text-warning"></i>{% trans "Inscrição: Clã ID" %} {{ profile.clan_id }}
                        </h3>
                    </div>
                    <div class="card-body p-4 p-md-5">
                        {% if messages %}
                        {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show border-0 shadow-sm"
                            style="background: rgba(255,255,255,0.1); color: #fff;" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                        </div>
                        {% endfor %}
                        {% endif %}

                        <div class="alert alert-info-custom p-4 mb-5">
                            <div class="d-flex">
                                <i class="fas fa-info-circle fa-2x me-3 text-info"></i>
                                <div>
                                    <h6 class="fw-bold mb-1 text-info">{% trans "Processo de Recrutamento" %}</h6>
                                    <p class="mb-0 small">{% trans "O Líder do Clã revisará sua inscrição. Se aprovado, você precisará aceitar o convite no jogo ou sua tag será atualizada automaticamente." %}</p>
                                </div>
                            </div>
                        </div>

                        <form method="post" action="{% url 'clans:apply' profile.clan_id %}">
                            {% csrf_token %}

                            {% if form.non_field_errors %}
                            <div class="alert alert-danger py-2 px-3 mb-4 small">
                                {{ form.non_field_errors|join:", " }}
                            </div>
                            {% endif %}

                            <div class="mb-5 p-4 rounded"
                                style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05);">
                                <label class="form-label form-label-glow"><i class="fas fa-user-ninja me-2"></i>{% trans "Identificação do Personagem" %}</label>
                                {% if characters %}
                                <select name="char_id" class="form-select form-control-glass" required id="charSelect">
                                    <option value="" disabled selected>-- {% trans "Escolha seu personagem" %} --</option>
                                    {% for char in characters %}
                                    <option value="{{ char.char_id }}" data-name="{{ char.char_name }}">
                                        {{ char.char_name }} ({% trans "Lv" %}. {{ char.level }}{% if char.clan_id %} - {% trans "Clã atual" %}: {{ char.clan_id }}{% endif %})
                                    </option>
                                    {% endfor %}
                                </select>
                                <input type="hidden" name="char_name" id="charNameInput" value="">
                                {% if form.char_id.errors or form.char_name.errors %}
                                <div class="invalid-feedback d-block text-danger mt-2">
                                    {{ form.char_id.errors|join:", " }} {{ form.char_name.errors|join:", " }}
                                </div>
                                {% endif %}
                                <script>
                                document.getElementById('charSelect').addEventListener('change', function() {
                                    var opt = this.options[this.selectedIndex];
                                    document.getElementById('charNameInput').value = opt.dataset.name || '';
                                });
                                </script>
                                {% else %}
                                <div class="row g-3">
                                    <div class="col-md-8">
                                        <input type="text" name="char_name" class="form-control form-control-glass"
                                            placeholder="{% trans 'Nome do Personagem' %}" required>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="number" name="char_id" class="form-control form-control-glass"
                                            placeholder="{% trans 'ID' %}" required>
                                    </div>
                                </div>
                                <div class="mt-2 text-warning small opacity-75">
                                    <i class="fas fa-info-circle me-1"></i>{% trans "Vincule suas contas do jogo ao site para selecionar personagens automaticamente." %}
                                </div>
                                {% endif %}
                            </div>

                            <div class="mb-5">
                                <label for="{{ form.message.id_for_label }}" class="form-label form-label-glow">
                                    <i class="fas fa-pen-nib me-2"></i>{% trans "Carta de Apresentação" %}
                                </label>
                                {% trans "Conte por que deseja entrar, sua classe foco, level e horários em que costuma jogar." as msg_placeholder %}
                                {% render_field form.message class="form-control form-control-glass" placeholder=msg_placeholder rows="5" %}

                                <div class="form-text mt-2" style="color: rgba(255,255,255,0.5);">{{ form.message.help_text }}</div>
                                {% if form.message.errors %}
                                <div class="invalid-feedback d-block text-danger mt-2">{{ form.message.errors|join:", " }}</div>
                                {% endif %}
                            </div>

                            <div class="d-flex flex-column flex-sm-row gap-3 justify-content-end border-top pt-4"
                                style="border-color: rgba(255,255,255,0.1) !important;">
                                <a href="{% url 'clans:detail' profile.clan_id %}"
                                    class="btn border-0 px-4 rounded-pill d-flex align-items-center justify-content-center"
                                    style="background: linear-gradient(135deg, #ef4444, #b91c1c); color:#ffffff; box-shadow: 0 8px 24px rgba(239,68,68,0.6); transition: all 0.25s;">
                                    {% trans "Cancelar" %}
                                </a>
                                <button type="submit" class="action-btn">
                                    <i class="fas fa-rocket me-2"></i>{% trans "Enviar Inscrição" %}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}