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

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

{% block body %}
<style>
    .cart {
        background-color: var(--grayb);
        width: 23rem;
        min-height: 20rem;
        box-shadow: 0 4px 8px 1px rgba(0, 0, 0.2, 0.1);
        border-radius: 0;
        margin: 1rem;
        transition: opacity 400ms;
        color: black;
    }
    .cart:hover {
        box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
        transform: translateY(-1px);
	    opacity:0.7;
    }
</style>
<div class="container mt-5 px-5">
    <div class="row">

        <div class="col-12">
            <form action="{{ path('search_datasets') }}" method="get">
            <div class="input-group mb-3 border border-black border-3">
                <input type="text" name="query" value="{{ query|default('') }}" class="form-control rounded-0 p-3" placeholder="Rechercher un jeu de données..." aria-label="Search" aria-describedby="basic-addon2" >
                <div class="input-group-append ">
                    <button class="btn btn-dark rounded-0 p-3" type="submit"><i class="fas fa-search"></i> Rechercher</button>
                </div>
            </div>
            </form>
        </div>

        <div class="col-12 text-center">
             <h1 class="fw-bold pb-4">Les résultats de "{{ query|default('cnrs') }}"</h1>
        </div>
    </div>
</div>

<section class="container px-4">
    <div class="row ">
        {% for dataset in datasets %}
            <div class="col d-flex justify-content-center ">
                <a href="{{ dataset.url|default('') }}" target="_blank">
                    <div class="cart p-4">
                        <p class="headvert"><strong>{{ dataset.name }}</strong></p>
                        
                        <p ><i class="fa-solid fa-newspaper"></i><small> {{ dataset.description|length > 100 ? dataset.description|slice(0, 100) ~ '……' : dataset.description}}</small></p>
                        <p><i class="fa-solid fa-chalkboard-user"></i> {{ dataset.publisher }}</p>
                        <p class="text-dark">
                                <i class="fa-regular fa-calendar-days"></i>
                                {{ dataset.createdAt|date("d/m/Y")}}
                        </p>
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>
</section>

<br>
<br>
{% endblock %}