{% set current_theme = current_theme() %} {% set config = config() %}

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

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

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

            <div class="container">
                <div class="d-flex justify-content-between 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">
                                    <a
                                        class="text-reset text-decoration-none link-dark"
                                        href="{{ url_for('course.tomar_curso', course_code=curso.codigo) }}"
                                        >{{ curso.nombre }}</a
                                    >
                                </li>
                                <li class="breadcrumb-item">
                                    <a
                                        class="text-reset text-decoration-none link-dark"
                                        href="{{ url_for('forum.ver_foro', course_code=curso.codigo) }}"
                                        >{{ _('Foro') }}</a
                                    >
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">{{ _('Responder') }}</li>
                            </ol>
                        </nav>
                    </h4>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <!-- Mensaje original -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">{{ _('Mensaje original') }}</h5>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <h6 class="mb-0">{{ mensaje.usuario.nombre }} {{ mensaje.usuario.apellido }}</h6>
                                        <small class="text-muted"
                                            >{{ mensaje.fecha_creacion.strftime('%d/%m/%Y') }} {{ _('a las') }} {{
                                            mensaje.fecha_creacion.strftime('%H:%M') }}</small
                                        >
                                    </div>
                                </div>
                                <div class="message-content">{{ mensaje.contenido_html | safe }}}</div>
                            </div>
                        </div>

                        <!-- Formulario de respuesta -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">{{ _('Tu respuesta') }}</h5>
                            </div>
                            <div class="card-body">
                                <form
                                    method="POST"
                                    action="{{ url_for('forum.responder_mensaje', course_code=curso.codigo, message_id=mensaje.id) }}"
                                >
                                    {{ form.hidden_tag() }}

                                    <div class="mb-3">
                                        {{ form.contenido.label(class="form-label") }} {{ form.contenido(class="form-control",
                                        rows="6") }} {% if form.contenido.errors %}
                                        <div class="text-danger">
                                            {% for error in form.contenido.errors %}
                                            <small>{{ error }}</small><br />
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                        <small class="form-text text-muted">
                                            {{ _('Puedes usar') }}
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#markdownHelp">Markdown</a> {{
                                            _('para dar formato a tu respuesta.') }}
                                        </small>
                                    </div>

                                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                        <a
                                            href="{{ url_for('forum.ver_mensaje', course_code=curso.codigo, message_id=mensaje.id) }}"
                                            class="btn btn-secondary me-md-2"
                                        >
                                            <i class="fas fa-times"></i> {{ _('Cancelar') }}
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-reply"></i> {{ _('Enviar Respuesta') }}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal de ayuda de Markdown -->
            <div class="modal fade" id="markdownHelp" tabindex="-1" aria-labelledby="markdownHelpLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="markdownHelpLabel">{{ _('Ayuda de Markdown') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <h6>{{ _('Formato básico') }}:</h6>
                            <ul>
                                <li>
                                    <code>**{{ _('texto en negrita') }}**</code> → <strong>{{ _('texto en negrita') }}</strong>
                                </li>
                                <li><code>*{{ _('texto en cursiva') }}*</code> → <em>{{ _('texto en cursiva') }}</em></li>
                                <li>
                                    <code># {{ _('Título grande') }}</code> →
                                    <h5>{{ _('Título grande') }}</h5>
                                </li>
                                <li>
                                    <code>## {{ _('Título mediano') }}</code> →
                                    <h6>{{ _('Título mediano') }}</h6>
                                </li>
                                <li><code>[{{ _('enlace') }}](URL)</code> → {{ _('enlace clickeable') }}</li>
                                <li><code>`{{ _('código') }}`</code> → <code>{{ _('código') }}</code></li>
                            </ul>
                            <h6>{{ _('Listas') }}:</h6>
                            <ul>
                                <li><code>- {{ _('elemento 1') }}</code></li>
                                <li><code>- {{ _('elemento 2') }}</code></li>
                            </ul>
                            <h6>{{ _('Citas') }}:</h6>
                            <p><code>&gt; {{ _('Esto es una cita') }}</code></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cerrar') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <style>
            .message-content {
                line-height: 1.6;
            }
            .message-content h1,
            .message-content h2,
            .message-content h3,
            .message-content h4,
            .message-content h5,
            .message-content h6 {
                margin-top: 1rem;
                margin-bottom: 0.5rem;
            }
            .message-content code {
                background-color: #f8f9fa;
                padding: 0.2rem 0.4rem;
                border-radius: 0.25rem;
            }
            .message-content pre {
                background-color: #f8f9fa;
                padding: 1rem;
                border-radius: 0.25rem;
                overflow-x: auto;
            }
            .message-content blockquote {
                border-left: 4px solid #dee2e6;
                padding-left: 1rem;
                margin-left: 0;
                color: #6c757d;
            }
        </style>
    </body>
</html>
