{% extends 'base.html' %}

{% block content %}

<div class="container-xl">
			    
    <h1 class="app-page-title">Resumen</h1>
    
    <nav id="orders-table-tab" class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4">
        <a class="flex-sm-fill text-sm-center nav-link active" id="orders-all-tab" data-bs-toggle="tab" href="#orders-all" role="tab" aria-controls="orders-all" aria-selected="true">Todos</a>
        
        <a class="flex-sm-fill text-sm-center nav-link" id="orders-pending-tab" data-bs-toggle="tab" href="#autores" role="tab" aria-controls="orders-pending" aria-selected="false">Autores</a>
    </nav>
    
    
    <div class="tab-content" id="orders-table-tab-content">
        <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
            <div class="app-card app-card-orders-table shadow-sm mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                        <table class="table app-table-hover mb-0 text-left">
                            <thead>
                                <tr>
                                    <th class="cell">#</th>
                                    <th class="cell">anno</th>
                                    <th class="cell">Título</th>
                                    <th class="cell">Autor</th>
                                    <th class="cell">Portada</th>
                                </tr>
                            <tbody>
                                {% for libro in libros %}
                                <tr>
                                    <td class="cell">{{ libro.id }}</td>
                                    <td class="cell">{{ libro.anno }}</td>
                                    <td class="cell">{{ libro.titulo }}</td>
                                    <td class="cell">{{ libro.autores.apellido }}, {{ libro.autores.nombre }}</td>
                                    {% if libro.portada %}
                                    <td class="cell"><img src="{{ url_for('paginas.uploaded_file', filename=libro.portada) }}" alt="{{ libro.titulo }}" style="width:200px;height:200px;"></td>
                                    {% else %}
                                    <p>Sin imagen</p>
                                    {% endif %}
                                </tr>
                                {% endfor %}	
                            </tbody>
                        </table>
                    </div><!--//table-responsive-->  
                </div><!--//app-card-body-->		
            </div><!--//app-card-->						
        </div><!--//tab-pane-->
                    
        <div class="tab-pane fade" id="autores" role="tabpanel" aria-labelledby="orders-pending-tab">
            <div class="app-card app-card-orders-table mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                        <table class="table mb-0 text-left">
                            <thead>
                                <tr>
                                    <th class="cell">#</th>
                                    <th class="cell">Nombre</th>
                                    <th class="cell">Apellido</th>
                                    <th class="cell">Foto</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in autores %}
                                <tr>
                                <td class="cell">{{ row.id }}</td>
                                <td class="cell">{{ row.nombre }}</td>
                                <td class="cell">{{ row.apellido }}</td>
                                {% if row.foto %}
                                <td class="cell"><img src="{{ url_for('paginas.uploaded_file', filename=row.foto) }}" alt="{{ row.apellido }}, {{ row.nombre}}" style="width:200px;height:200px;"></td>
                                {% else %}
                                <p>Sin imagen</p>
                                {% endif %}
                                </tr>
                                {% endfor %}	

                            </tbody>
                        </table>
                    </div><!--//table-responsive-->
                </div><!--//app-card-body-->		
            </div><!--//app-card-->
        </div><!--//tab-pane-->
    </div><!--//tab-content-->
    


</div><!--//container-fluid-->

{% endblock %}