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

{% block title %}Médiathèque - Accueil{% endblock %}

{% block body %}
<div id="navbar-limit"></div>
<section class="container">
    <div class="row justify-content-between text-dark my-5">
        <div class="card col-4" style="width: 18rem;">
            <img src="{{asset('img/media/clinic/devanture.jpg')}}" class="card-img-top pt-2 img-fluid" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center title-thin font-weight-bold">La clinique</h5>
                <p class="card-text text-justify">Photographies de la clinique.</p>
                <div class="text-center">
                    <a href="#" class="btn btn-info">Voir</a>
                </div>
            </div>
        </div>
        <div class="card col-4" style="width: 18rem;">
            <img src="{{asset('img/media/equipment/6.jpg')}}" class="card-img-top pt-2 img-fluid" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center title-thin font-weight-bold">Le matériel</h5>
                <p class="card-text text-justify">Photographies du matériel utilisé pour chouchouter nos patients.</p>
                <div class="text-center">
                    <a href="{{path('library-by-cat', {'category' : 'equipment'})}}" class="btn btn-info">Voir</a>
                </div>
            </div>
        </div>
        <div class="card col-4" style="width: 18rem;">
            <img src="{{asset('img/media/resident/123.jpg')}}" class="card-img-top pt-2 img-fluid" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center title-thin font-weight-bold">Les pensionnaires</h5>
                <p class="card-text text-justify">Photographies les pensionnaires de la clinique vétérinaire.</p>
                <div class="text-center">
                    <a href="#" class="btn btn-info">Voir</a>
                </div>
            </div>
        </div>
        <div class="card col-4" style="width: 18rem;">
            <img src="{{asset('img/media/team/team.jpg')}}" class="card-img-top pt-2 img-fluid" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center title-thin font-weight-bold">L'équipe</h5>
                <p class="card-text text-justify">Photographies de l'équipe de la clinique.</p>
                <div class="text-center">
                    <a href="#" class="btn btn-info">Voir</a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}