{% set current_theme = current_theme() %} {% from "macros/form_errors.j2" import render_field_errors, render_form_errors %}

<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>Reportar {{ _("Mensaje") }}</title>
        {{ current_theme.local_style() }}
    </head>

    <body>
        {{ current_theme.navbar() }}

        <main>
            {{ current_theme.notify() }}

            <div class="container px-4 py-5">
                <div class="pb-2 border-bottom">
                    <h4>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a class="text-reset text-decoration-none link-dark" href="{{ url_for('home.panel') }}">
                                        {{ _("Inicio") }}
                                    </a>
                                </li>
                                <li class="breadcrumb-item active">Reportar {{ _("Mensaje") }}</li>
                            </ol>
                        </nav>
                    </h4>
                </div>

                <div class="row justify-content-center">
                    <div class="col-md-10">
                        {% if messages %}
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i>
                            Seleccione el mensaje que desea reportar y proporcione el motivo del reporte.
                        </div>

                        <form method="post">
                            <div class="mb-4">
                                <label class="form-label fw-bold">Seleccionar {{ _("Mensaje") }}</label>
                                <div class="list-group">
                                    {% for message in messages %}
                                    <label class="list-group-item list-group-item-action">
                                        <div class="d-flex align-items-start">
                                            <input
                                                class="form-check-input me-3 mt-1"
                                                type="radio"
                                                name="message_id"
                                                value="{{ message.id }}"
                                                required
                                            />
                                            <div class="flex-grow-1">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <h6 class="mb-1">{{ message.thread_title }}</h6>
                                                    <small class="text-muted">{{ message.timestamp }}</small>
                                                </div>
                                                <p class="mb-1">{{ message.content }}</p>
                                                <small class="text-muted">Por: {{ message.sender }}</small>
                                            </div>
                                        </div>
                                    </label>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="reason" class="form-label fw-bold">Motivo del Reporte</label>
                                <textarea
                                    class="form-control"
                                    id="reason"
                                    name="reason"
                                    rows="4"
                                    placeholder="Describa por qué está reportando este mensaje..."
                                    required
                                ></textarea>
                                <div class="form-text">
                                    Proporcione detalles específicos sobre por qué considera que este mensaje es inapropiado.
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <button class="btn btn-danger" type="submit">
                                    <i class="bi bi-flag-fill"></i> Reportar {{ _("Mensaje") }}
                                </button>
                                <a href="{{ url_for('home.panel') }}" class="btn btn-secondary"> {{ _("Cancelar") }} </a>
                            </div>
                        </form>
                        {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-chat-left-text" style="font-size: 3rem; color: #6c757d"></i>
                            <h5 class="mt-3">No hay mensajes disponibles</h5>
                            <p class="text-muted">
                                No se encontraron mensajes en los cursos en los que está inscrito para reportar.
                            </p>
                            <a href="{{ url_for('home.panel') }}" class="btn btn-primary"> Volver al Panel </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
