{% set current_theme = current_theme() %} {% from "macros/form_errors.j2" import render_field_errors, render_form_errors %} {%
from 'macros/form_buttons.j2' import render_form_buttons %}
<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>{{ _("Editar") }} {{ _("Recurso") }} Descargable</title>

        {{ current_theme.local_style() }}
        <!-- Custom styles for this template -->
        <link href="{{ url_for('static', filename='css/form-validation') }}" rel="stylesheet" />
    </head>

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

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

            <div class="container px-4 py-5" id="icon-grid">
                <h3 class="pb-2 border-bottom">{{ _("Editar") }} {{ _("Recurso") }} Descargable</h3>
                <p class="text-muted">
                    Edite la información del recurso o suba un nuevo archivo. Tamaño máximo: {{ max_file_size }}MB.
                    <br />
                    Archivo actual: <strong>{{ recurso.doc }}</strong>
                </p>

                <form method="POST" enctype="multipart/form-data" class="row g-3 needs-validation" novalidate>
                    {{ form.hidden_tag() }}

                    <div class="col-md-12">
                        <label for="nombre" class="form-label">{{ _("Nombre") }} del recurso *</label>
                        {{ form.nombre(class="form-control", required=true) }} {{ render_field_errors(form.nombre) }}
                        <div class="invalid-feedback">Por favor, ingrese un nombre para el recurso.</div>
                    </div>

                    <div class="col-md-12">
                        <label for="descripcion" class="form-label">{{ _("Descripción") }} *</label>
                        {{ form.descripcion(class="form-control", rows="4", required=true) }} {{
                        render_field_errors(form.descripcion) }}
                        <div class="invalid-feedback">Por favor, ingrese una descripción para el recurso.</div>
                    </div>

                    <div class="col-md-12">
                        <label for="archivo" class="form-label">Reemplazar archivo (opcional)</label>
                        <input
                            type="file"
                            class="form-control"
                            name="archivo"
                            id="archivo"
                            accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.rtf,.csv,.zip,.rar,.7z,.jpg,.jpeg,.png,.gif,.bmp,.svg,.webp,.mp3,.wav,.ogg,.mp4,.avi,.mov,.wmv,.flv,.webm,.json,.xml,.yaml,.yml,.md,.html,.css,.prn"
                        />
                        <div class="form-text">
                            Deje vacío para conservar el archivo actual. No se permiten archivos ejecutables (.exe, .bat, .sh,
                            etc.)
                        </div>
                    </div>

                    <div class="col-md-12">
                        <label for="requerido" class="form-label">{{ _("Tipo") }} de recurso</label>
                        {{ form.requerido(class="form-select") }} {{ render_field_errors(form.requerido) }}
                    </div>

                    <div class="col-12">
                        {{ render_form_buttons(_("Guardar Cambios"), url_for('course.administrar_curso', course_code=id_curso))
                        }}
                    </div>
                </form>
            </div>
        </main>

        {{ current_theme.footer() }} {{ current_theme.local_scripts() }}

        <!-- Bootstrap form validation -->
        <script>
            // Example starter JavaScript for disabling form submissions if there are invalid fields
            ;(function () {
                "use strict"
                window.addEventListener(
                    "load",
                    function () {
                        // Fetch all the forms we want to apply custom Bootstrap validation styles to
                        var forms = document.getElementsByClassName("needs-validation")
                        // Loop over them and prevent submission
                        var validation = Array.prototype.filter.call(forms, function (form) {
                            form.addEventListener(
                                "submit",
                                function (event) {
                                    if (form.checkValidity() === false) {
                                        event.preventDefault()
                                        event.stopPropagation()
                                    }
                                    form.classList.add("was-validated")
                                },
                                false
                            )
                        })
                    },
                    false
                )
            })()
        </script>
    </body>
</html>
