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

{% block title %}Visionnage d'une annonce{% endblock %}

{% block body %}
    <main role="main" id="duty_show_page">
        <section class="container-md">
            <div class="row p-2">
                <div class="col-lg-8 col-md-12 card" id="duty_card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h4 class="card-title mb-1 text">{{ duty.title }}</h4>
                                <h6 class="card-subtitle mb-2 text-muted text-primary">{{ duty.dutyType.title }}</h6>
                            </div>

                            <div class="col-12 mb-0">
                                <p class="card-text text text-justify mb-5">{{ duty.description }}</p>
                                <p class="card-text w-100 mb-0 text-right text text-bold">{{ duty.asker.name }} {{ duty.asker.firstname }}</p>
                                <p class="card-text w-100 mb-3 text-right text"><small class="text-muted">Posté le {{ duty.createdAt ? duty.createdAt|date('d/m/Y') : '' }}</small></p>
                                <p class="card-text w-100 mb-0 text-primary">Durée : <small class="text-muted">{{ duty.duration }} heures</small></p>
                                <p class="card-text w-100 mb-0 text-primary">Lieu : <small class="text-muted">{{ duty.place }}</small></p>
                                <p class="card-text w-100 mb-3 text-primary">Nombre de grains de sel : <small class="text-muted">{{ duty.price }}</small></p>
                            </div>

                            <div class="col-12 text-right">
                                <a href="{{ path('member_duties', {'id': app.user.id}) }}" class="text-primary"><i class="fas fa-chevron-left"></i> Retour</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="background_blue"></div>
        </section>
    </main>
{% endblock %}