{% extends 'base.html.twig' %}

{% block title %}Sciences | Corpus Humanum{% endblock %}

{% block body %}
<style>

    .cart {
        background-color: var(--grayb);
        width: 20rem;
        min-height: 16.5rem;
        box-shadow: 0 4px 8px 1px rgba(0, 0, 0.2, 0.1);
        border-radius: 0;
        margin: 1rem;
        transition: opacity 400ms;
    }
    .cart:hover {
        box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
        transform: translateY(-1px);
	    opacity:0.7;
    }
    .img1 {
        width: 20rem;
        height: 10rem;
        object-fit: cover;
        background: linear-gradient(to right, #8360c3, #2ebf91);
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .img2 {
        width: 20rem;
        height: 10rem;
        object-fit: cover;
        border-radius: 0;
        
    }


</style>
<div class="container mt-5 px-3">
<section>
    <div class="row d-flex justify-content-evenly pt-4 mx-3">
    <div class="col-md-auto">
        <a href={{ path('app_science') }}
        class="h3 head {{ app.request.get('_route') == 'app_science' or app.request.get('_route') == 'science_tag' ? 'active' }}">                   
        PaulVa data                   
        </a>
    </div>
    <div class="col-md-auto">
        <a href={{ path('science_realiser') }}
        class=" h3 head {{ app.request.get('_route') == 'science_realiser' ? 'active' }}"> 
                PaulVa Réalisations
        </a>
    </div>
    <div class="col-md-auto">
        <a href={{ path('entrepot') }}
        class=" h3 head {{ app.request.get('_route') == 'entrepot' ? 'active' }}"> 
                Entrepôt
        </a>
    </div>
    <div class="col-md-auto">
        <a href={{ path('science_rss') }}
        class=" h3 head {{ app.request.get('_route') == 'science_rss' ? 'active' }}"> 
                Vielle
        </a>
    </div>

</div>
<hr>
<div class="pb-3">
<form
class="search input-group"
{{ stimulus_controller('search-preview', {
    url: path('app_science')
}) }}
action="{{ path('app_science') }}">

<button class="input-group-text" type="submit">
<i class="fas fa-search content-search-icon"></i>
</button>
    <input
        autocomplete="off"
        type="search"
        name="science"
        class="form-control input-group-prepend"
        placeholder="Rechercher..."
        aria-label="Search"
        value="{{ app.request.query.get('science')}}"
        data-action="search-preview#onSearchInput"
    >
    <div
    class="search-preview"
    data-search-preview-target="result"
    >
    </div>
</form>
</div>


        <div class="row">
                <div class="col-auto ">

                    <a href="{{ path('app_science') }}">
                        <p class="btn btn-outline-dark py-1 mr-1 rounded-0">TOUT</p>
                    </a>

                    {% for tag1 in tags|sort %}
                    {% set route = app.request.attributes.get('_route_params') %}

                    <a href={{ path('science_tag', {'slugtag' : tag1.id} ) }}>
                        {% if tag1.id == route.slugtag %}
                            <p class="btn btn-dark py-1 mr-1 rounded-0">
                            {{ tag1.titret }}
                            </p>
                        {% else %}
                            <p class="btn btn-outline-dark py-1 rounded-0">
                            {{ tag1.titret }}
                            </p>
                        {% endif %}
                    </a> 
                    {% endfor %}
                </div>

        </div>

</section>

<section>
    <div class="row">
    {% for science in pager %}  
            <div class="col d-flex justify-content-center ">
            <a href={{ path('science_show', {'id' : science.id}) }}> 
                <div class="cart text-start">
                    <div class="img1">
                        {% if science.image == true %}
                            <img class="img2" src="{{ asset(science.ImageUrl)|imagine_filter('squared_thumbnail_small') }}" alt="image">
                        {% else %}
                            <img class="img2" src="" alt="">
                        {% endif %}
                    </div>
                    <p class="fw-bold text-dark mt-3 mb-2 px-4">{{science.titre|length > 30 ? science.titre|slice(0, 30) ~ '…' : science.titre}}</p>
                    <div class="px-4">
                        {% for tag1 in science.Tag1|slice(0, 2) %}
                            <p class="btn btn-outline-dark btn-sm py-0 mb-1 rounded-0">{{ tag1.titret }}</p>
                        {% endfor %}
                        {% if science.Tag1|length > 2 %}
                            <p class="btn btn-outline-dark btn-sm py-0 mb-1 rounded-0">...</p>
                        {% endif %}
                    </div>
                </div>  
            </a> 
            </div>
    {% endfor %}
    <div class="pager d-flex justify-content-center align-items-center pt-4">{{ pagerfanta(pager) }}</div>
    </div>
</section>


</div>
<br><br>
{% endblock %}