<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    {% set current_theme = current_theme() %}

    <head>
        {{ current_theme.headertags() }} {{ current_theme.local_style() }}
        <title>{{ title }} - {{ _('Instructor') }}</title>
    </head>

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

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

            <div class="container px-0 py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="pb-2 border-bottom">{{ title }}</h4>
                    <a href="{{ url_for('instructor_announcements.list_announcements') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> {{ _('Volver a la lista') }}
                    </a>
                </div>

                <div class="row mt-4">
                    <div class="col-md-8">
                        <form method="POST">
                            {{ form.hidden_tag() }}

                            <div class="mb-3">
                                {{ form.title.label(class="form-label") }} {{ form.title(class="form-control") }} {% if
                                form.title.errors %}
                                <div class="text-danger">
                                    {% for error in form.title.errors %}
                                    <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                {{ form.course_id.label(class="form-label") }} {{ form.course_id(class="form-select") }} {% if
                                form.course_id.errors %}
                                <div class="text-danger">
                                    {% for error in form.course_id.errors %}
                                    <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                {{ form.message.label(class="form-label") }} {{ form.message(class="form-control", rows="10")
                                }} {% if form.message.errors %}
                                <div class="text-danger">
                                    {% for error in form.message.errors %}
                                    <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <div class="form-text">{{ _('Puedes usar Markdown para formatear el contenido.') }}</div>
                            </div>

                            <div class="mb-3">
                                {{ form.expires_at.label(class="form-label") }} {{ form.expires_at(class="form-control") }} {%
                                if form.expires_at.errors %}
                                <div class="text-danger">
                                    {% for error in form.expires_at.errors %}
                                    <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <div class="form-text">{{ _('Deja vacío si no quieres que expire.') }}</div>
                            </div>

                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <a
                                    href="{{ url_for('instructor_announcements.list_announcements') }}"
                                    class="btn btn-secondary me-md-2"
                                >
                                    {{ _('Cancelar') }}
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle"></i>
                                    {% if announcement %}{{ _('Actualizar') }}{% else %}{{ _('Crear') }}{% endif %} {{
                                    _('Anuncio') }}
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-title mb-0"><i class="bi bi-info-circle"></i> {{ _('Información') }}</h6>
                            </div>
                            <div class="card-body">
                                <p class="card-text small">
                                    {{ _('Los anuncios de curso son visibles únicamente para los estudiantes inscritos en el
                                    curso seleccionado.') }}
                                </p>
                                <p class="card-text small">
                                    <strong>{{ _('Markdown:') }}</strong> {{ _('Puedes usar formato Markdown para enriquecer el
                                    contenido del anuncio.') }}
                                </p>
                                <p class="card-text small">
                                    <strong>{{ _('Expiración:') }}</strong> {{ _('Si defines una fecha de expiración, el
                                    anuncio dejará de mostrarse automáticamente.') }}
                                </p>
                                <p class="card-text small">
                                    <strong>{{ _('Visibilidad:') }}</strong> {{ _('Solo puedes crear anuncios para cursos donde
                                    eres instructor.') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
