{% extends "layout/base.html" %}
{% block content %}
{# LA SECCIÓN EMPIEZA AQUÍ #}
<!-- main content start -->
<section id="slideshow" style="max-width: 100%">
     <div>
        <div class="item">
            <img class="hidden-xs img-responsive" src="imagenes/cabecera-llerena.jpg" class="img-responsive" alt="[Config::AZ_WEB_NAME]">
            <img class="hidden-lg hidden-md hidden-sm img-responsive" src="imagenes/cabecera-llerena.jpg" alt="[Config::AZ_WEB_NAME]">
        </div>
    </div>
</section>
<div class="top-header">
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-sm-10 col-xs-8">
            <header class="header" id="header" role="banner">
    <!-- navigation start -->
    <div class="navbar">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style="float:right">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <nav class="collapse navbar-collapse">
                {{menus.render(1, seo)}}
            </nav>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </div>
</header>
            </div> <!--/.col-->
            <div class="col-md-2 col-sm-2 col-xs-4">
            	<div class="top-logout redes_sociales" style="padding-left: 0px;">
               	<a href="tel://+4402077049977"><i class="fa fa-phone"></i> </a>
               	<!--<a href="https://www.jamonysalud.co.uk/contactar-company-providing-ham-from-extremadura.html"><i class="fa fa-envelope-o"></i> </a>-->
                	<a target="_blank" href="https://www.facebook.com/llerena.ibericotapasbar/"><i class="fa-brands fa-facebook"></i></a>
                                <a target="_blank" href="https://www.instagram.com/llerena.ibericotapasbar/"><i class="fa-brands fa-instagram"></i></a>
                                <a target="_blank" href="https://www.tiktok.com/@llerena.spanishbar"><i class="fa-brands fa-tiktok"></i></a>
					<a target="_blank" href="https://www.tripadvisor.co.uk/Restaurant_Review-g186338-d13341128-Reviews-Llerena_Iberico_Tapas_Bar-London_England.html"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png" class="img-responsive"/></a>
					<script async src="https://www.jscache.com/wejs?wtype=socialButtonBubbles&amp;uniq=714&amp;locationId=13341128&amp;color=green&amp;size=rect&amp;lang=en_UK&amp;display_version=2"></script>
                </div>
        </div> <!--/.col-->
    </div> <!--/.row-->
</div> <!--/.container-->
</div>
<section id="main-content" class="main-content pad-60">
    <div class="container">
        <div class="row">
            {% if resultado_upload %}
            <div class="alert alert-{{resultado_upload_class}}">{{resultado_upload}}</div>
            {% endif %}
            <div class="col-md-4">
                <a data-toggle="collapse" href="#materialUniversidad" aria-expanded="false" aria-controls="materialUniversidad">
                    <h3 class="sm-title no-margin"><span>Material Universidad</span></h3>
                </a>
            </div>

            <div class="col-md-4">
                <a data-toggle="collapse" href="#materialJamonYSalud" aria-expanded="false" aria-controls="materialJamonYSalud">
                    <h3 class="sm-title no-margin"><span>Material Jamon Y Salud</span></h3>
                </a>
            </div>

            <div class="col-md-4">
                <a data-toggle="collapse" href="#subirMaterial" aria-expanded="false" aria-controls="materialJamonYSalud">
                    <h3 class="sm-title no-margin"><span>Subir Material</span></h3>
                </a>
            </div>
        </div><!--/row-->
        <div class="row">
            <div class="col-md-12 collapse" id="materialUniversidad">
                <div class="row-fluid">
                    {% for material in material_universidad %}
                    <div class="gallery-item isotope-item col-md-4 col-xs-4">
                        {% if material.tipo == "image/jpeg" %}
                        <a href="{{ material.imagenes['ficha'] }}" class="fancybox">
                            <img src="{{ material.imagenes['listado'] }}" alt="{{ material.nombre }}">
                            <div class="hover-icon">
                            	<i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </a>

                        {% elseif material.tipo == "application/msword" %}
                        <a href="{{ material.url }}">
                            <img src="imagenes/proyectos/imagen_proyecto.jpg" alt="{{ material.nombre }}">
                            <div class="hover-icon">
                                <h3 class="meta_nombre">{{ material.nombre }}</h3>
                                <i class="fa fa-download fa-3x"></i>
                            </div>
                        </a>

                        {% elseif material.tipo == "application/pdf" %}
                        <a href="{{ material.url }}" download>
                            <img src="imagenes/proyectos/imagen_proyecto.jpg" alt="{{ material.nombre }}">
                            <div class="hover-icon">
                                <h3 class="meta_nombre">{{ material.nombre }}</h3>
                                <i class="fa fa-file-pdf-o fa-3x"></i>
                            </div>
                        </a>
                        {% endif %}
                    </div><!--/col4-->
                    {% endfor %}
                </div>
            </div><!--/gallery-->

            <div class="col-md-12 collapse" id="materialJamonYSalud">
                <div class="row-fluid">                	
                    {% for material in material_jamonysalud %}
                    <div class="gallery-item isotope-item col-md-4 col-xs-4">
                        {% if material.tipo == "image/jpeg" %}
                        <a href="{{ material.imagenes['ficha'] }}" class="fancybox">
                            <img src="{{ material.imagenes['listado'] }}" alt="{{ material.nombre }}">
                            <div class="hover-icon">     	
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </a>

                        {% elseif material.tipo == "application/msword" %}
                        <a href="{{ material.url }}">
                            <img src="imagenes/proyectos/imagen_proyecto.jpg" alt="{{ material.nombre }}">                        
                            <div class="hover-icon">
                                <h3 class="meta_nombre">{{ material.titulo }}</h3>
                                <i class="fa fa-download fa-3x"></i>
                            </div>
                        </a>
					
                        {% elseif material.tipo == "application/pdf" %}
                        <a href="{{ material.url }}" download>
                            <img src="imagenes/proyectos/imagen_proyecto.jpg" alt="{{ material.nombre }}">
                            <div class="hover-icon">
                                <h3 class="meta_nombre">{{ material.titulo }}</h3>
                                <i class="fa fa-file-pdf-o fa-3x"></i>
                            </div>
                        </a>
                        {% endif %}
                        
                        <h4 class="h4_material">{{ material.titulo }}</h4>
                    </div><!--/col4-->
                    {% endfor %}
                </div>
            </div><!--/gallery-->
            <div class="col-md-12 collapse" id="subirMaterial">
                <div class="row-fluid">
                    <form method="post" enctype="multipart/form-data" action="/subirMaterialInvestigacion/">
                        <div class="form-group">
                            <label for="archivo">
                                Escoger imagen para subir:
                            </label>
                            <input type="file" class="form-control" required name="archivo">
                        </div>
                        <button type="submit">Subir archivo</button>
                    </form>
                </div>
            </div><!--/gallery-->
        </div><!--/row-->
    </div>
</section>
{% endblock %}