{% extends 'base.html' %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3>Editar libro</h3>
    <div class="box">
        <form method="POST" action="{{ url_for('paginas.edit_libro', libro_id=libro.id) }}"> 
            <div class="text mb-3">
                <label for="anno">anno:</label>
                <input class="form-control" type="date" id="anno" name="feannocha" value="{{ libro.anno }}" required>
            </div>

            <div class="text mb-3">
                <label for="autor_id">Autor</label>
                <select class="form-control" id="autor_id" name="autor_id" required>
                    {% for autor in autores %}
                    <option value="{{ autor.id }}" {% if libro.autor_id == autor.id %}selected{% endif %}>{{ libro.anno }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="text mb-3">
                <label for="titulo">Título:</label>
                <input class="form-control" type="text" id="titulo" name="titulo" value="{{ libro.titulo }}" required>
            </div>

            <div class="text mb-3">
                <label for="portada">Portada</label>
                <input class="form-control" type="file" id="portada" name="portada">
                {% if libro.portada %}
                <img src="{{ url_for('paginas.uploaded_file', filename=libro.portada) }}" alt="{{ libro.titulo }}" style="width:100px;height:100px;"><br>
                {% endif %}
            </div>

            <div class="text mb-3">
                <label for="epub">Portada</label>
                <input class="form-control" type="file" id="epub" name="epub">
                {% if libro.portada %}
                <img src="{{ url_for('paginas.uploaded_file', filename=libro.epub) }}" alt="{{ libro.titulo }}" style="width:100px;height:100px;"><br>
                {% endif %}
            </div>
            
            <div class="text mb-3">
                  <button type="submit" class="btn app-btn-primary w-100 theme-btn mx-auto">Guardar cambios</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}