{% extends 'layout.html' %}

{% load static %}

{% block contenu%}
<!--begin::Card-->
{% if reussite %}
    <div class="my-lg-0 my-3">
        <button class="btn btn-sm btn-success font-weight-bolder text-uppercase mr-3">
            <i class="text-white">{{message}}</i>
        </button>
    </div>
    {% endif %}
    {% if reussite == False %}
    <div class="my-lg-0 my-3">
        <button class="btn btn-sm btn-warning font-weight-bolder text-uppercase mr-3">
            <i class="text-white">{{message}}</i>
        </button>
    </div>
    {% endif %}
<div class="card card-custom gutter-b">
    <div class="card-body">
        <!--begin::Details-->
        <div class="d-flex mb-9">
            <!--begin: Pic-->
            <div class="flex-shrink-0 mr-7 mt-lg-0 mt-3">
                <div class="symbol symbol-50 symbol-lg-120">
<!--                    <img src=""/>-->
                </div>
                <div class="symbol symbol-50 symbol-lg-120 symbol-primary d-none">
                    <span class="font-size-h3 symbol-label font-weight-boldest">JM</span>
                </div>
            </div>
            <!--end::Pic-->
            <!--begin::Info-->
            <div class="flex-grow-1">
                <!--begin::Title-->
                <div class="d-flex justify-content-between flex-wrap mt-1">
                    <div class="d-flex mr-3">
                        <a  class="text-dark-75 text-hover-primary font-size-h5 font-weight-bold mr-3">{{article.nom_article}}</a>
                        <a >
                            <span class="label {{couleur}} label-inline font-weight-bolder mr-1"></span>

                        </a>
                    </div>
                    <div class="my-lg-0 my-3">
                        <button class="btn btn-sm btn-warning font-weight-bolder text-uppercase mr-3">
                            <a href="{% url 'listArticle' %}" class="text-white">Retour</a>
                        </button>
                    </div>
                </div>
                <!--end::Title-->
                <!--begin::Content-->
                <div class="d-flex flex-wrap justify-content-between mt-1">
                    <div class="d-flex flex-column flex-grow-1 pr-8">
                        <div class="d-flex flex-wrap mb-4">
                            <a class="text-dark-50 text-hover-primary font-weight-bold mr-lg-8 mr-5 mb-lg-0 mb-2">

                                <span class="label {{couleur}} label-inline font-weight-bolder mr-1">{{article.disponibilite_article}} chez le fournisseur</span>
                            </a>
                        </div>

                        <div class="d-flex flex-wrap mb-4">
                            <a class="text-dark-50 text-hover-primary font-weight-bold mr-lg-8 mr-5 mb-lg-0 mb-2">

                            </a>
                        </div>
                        <div class="d-flex flex-wrap mb-4">
                            <a class="text-dark-50 text-hover-primary font-weight-bold mr-lg-8 mr-5 mb-lg-0 mb-2">

                            </a>
                        </div>
                        <div class="separator separator-dashed my-5"></div>
                        <!--begin::Accordion-->
                        <div class="accordion accordion-solid accordion-toggle-plus" id="accordionExample3">

                            <div class="card">
                                <div class="card-header" id="headingThree3">
                                    <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree3">Voir les informations du livre</div>
                                </div>
                                <div id="collapseThree3" class="collapse" data-parent="#accordionExample3">

                                    <form class="form">
                                        <div class="card-body">
                                            <div class="form-group row">
                                                <div class="col-lg-6">
                                                    <label>CODE EAN13:</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <i class="la la-barcode"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" disabled="disabled" placeholder="{{article.code_EAN13_article}}" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <label>Année de publication</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <i class="la la-calendar-check"></i>
                                                            </span>
                                                        </div>
                                                       <input type="text" class="form-control" disabled="disabled" placeholder="2019" />
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-lg-4">
                                                    <label>Reference DILICOM de l'article:</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <i class="la la-info-circle"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" disabled="disabled" placeholder="{{article.ref_dilicom_article}}" />
                                                    </div>
                                                </div>

                                                <div class="col-lg-4">
                                                    <label>Date d'import</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <i class="la la-calendar-check"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" disabled="disabled" placeholder="{{article.date_creation_article}}" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <label>Poids de l'article:</label>
                                                    <div class="input-group">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text">
                                                                <i class="la la-weight"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control" disabled="disabled" placeholder="{{poids}}" />

                                                    </div>
                                                </div>
                                            </div>
<!--                                            <div class="form-group row">-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>E-mail:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-info-circle"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="bjijnk" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Addresse:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-append">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-map-marker"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="PARIS" />-->

<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Taille:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                CM-->
<!--                                                                <i class="la la-cut"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="15kg" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            <div class="form-group row">-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Poids:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-weight"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="12 mm" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Date Adhesion:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-append">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-calendar"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="iuhyiuhk" />-->

<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Nationalite:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-info-circle"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            <div class="form-group row">-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Profession:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-info-circle"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Entreprise:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="moise" />-->
<!--                                                        <div class="input-group-append">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-map-marker"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Groupe sanguin:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-info-circle"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            <div class="form-group row">-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Niveau d'Etude:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-info-circle"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Statut Matrimonial:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="" />-->
<!--                                                        <div class="input-group-append">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-map-marker"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Sexe:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-info-circle"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->

<!--                                            <div class="form-group row">-->
<!--                                                <div class="col-lg-4">-->
<!--                                                    <label>Type Assurance:</label>-->
<!--                                                    <div class="input-group">-->
<!--                                                        <div class="input-group-prepend">-->
<!--                                                            <span class="input-group-text">-->
<!--                                                                <i class="la la-info-circle"></i>-->
<!--                                                            </span>-->
<!--                                                        </div>-->
<!--                                                        <input type="text" class="form-control" disabled="disabled" placeholder="" />-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->

                                            <!-- begin: Example Code-->
                                            <!-- end: Example Code-->
                                        </div>
                                    </form>



                                </div>
                            </div>
                        </div>
                        <!--end::Accordion-->


                    </div>

<!--                        <div class="d-flex align-items-center w-25 flex-fill float-right mt-lg-12 mt-8">-->
<!--                            <span class="font-weight-bold text-dark-75">...</span>-->
<!--                            <div class="progress progress-xs mx-3 w-100">-->
<!--                                <div class="progress-bar bg-success" role="progressbar" style="width: 63%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>-->
<!--                            </div>-->
<!--                            <span class="font-weight-bolder text-dark">78%</span>-->
<!--                        </div>-->

                </div>
                <!--end::Content-->
            </div>
            <!--end::Info-->
        </div>
        <!--end::Details-->
        <div class="separator separator-solid"></div>
        <!--begin::Items-->
        <div class="d-flex align-items-center flex-wrap mt-8">
            <!--begin::Item-->
            <div class="d-flex align-items-center flex-lg-fill mr-5 mb-2">
                <span class="mr-4">
                    <i class="flaticon-piggy-bank display-4 text-muted font-weight-bold"></i>
                </span>
                <div class="d-flex flex-column text-dark-75">
                    <span class="font-weight-bolder font-size-sm">PRIX DILICOM DU LIVRE</span>
                    <span class="font-weight-bolder font-size-h5">
                         <span class="text-dark-50 font-weight-bold">{{article.prix_HT_article}} Euro </span>
                    </span>
                </div>
            </div>
            <!--end::Item-->
            <!--begin::Item-->
            <div class="d-flex align-items-center flex-lg-fill mr-5 mb-2">
                <span class="mr-4">
                    <i class="flaticon-pie-chart display-4 text-muted font-weight-bold"></i>
                </span>
                <div class="d-flex flex-column text-dark-75">
                    <span class="font-weight-bolder font-size-sm">COLLECTION </span>
                    <span class="font-weight-bolder font-size-h5">
                        {% for collection in collections %}
                         <span class="text-dark-50 font-weight-bold">{{collection.nom_collection}} </span>
                        {% endfor %}
                    </span>
                </div>
            </div>

            <!--begin::Item-->
<!--            <div class="d-flex align-items-center flex-lg-fill mr-5 mb-2">-->
<!--                <span class="mr-4">-->
<!--                    <i class="flaticon-pie-chart display-4 text-muted font-weight-bold"></i>-->
<!--                </span>-->
<!--                <div class="d-flex flex-column text-dark-75">-->
<!--                    <span class="font-weight-bolder font-size-sm">PART LDFG </span>-->
<!--                    <span class="font-weight-bolder font-size-h5">-->
<!--                         <span class="text-dark-50 font-weight-bold">F CFA </span>-->
<!--                    </span>-->
<!--                </div>-->
<!--            </div>-->


            <!--end::Item-->
            <!--begin::Item-->
<!--            <div class="d-flex align-items-center flex-lg-fill mr-5 mb-2">-->
<!--                <span class="mr-4">-->
<!--                    <i class="flaticon-pie-chart display-4 text-muted font-weight-bold"></i>-->
<!--                </span>-->
<!--                <div class="d-flex flex-column text-dark-75">-->
<!--                    <span class="font-weight-bolder font-size-sm">Nombre d'assuré </span>-->
<!--                    <span class="font-weight-bolder font-size-h5">-->
<!--                          <span class="text-dark-50 font-weight-bold"> </span>-->
<!--                    </span>-->
<!--                </div>-->
<!--            </div>-->
            <!--end::Item-->

        </div>
        <!--begin::Items-->
    </div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-body">
        <!--begin::Details-->
        <div class="d-flex mb-9">
            <!--begin: Pic-->
            <!--end::Pic-->
            <!--begin::Info-->
            <div class="flex-grow-1">
                <!--begin::Title-->
                <div class="d-flex justify-content-between flex-wrap mt-1">
                    <div style="justify-content: flex; flex-direction: column">
                        <div class="d-flex mr-3 mb-9 text-warning">
                            <h2 class="-center">DESCRIPTION DE L'ARTICLE</h2>
                        </div>
                        <div>
                            {{ article.description_article | safe}}
                        </div>
                    </div>



                </div>
                <!--end::Title-->
                <!--begin::Content-->

                <!--end::Content-->
            </div>
            <!--end::Info-->
        </div>
        <!--end::Details-->

        <!--begin::Items-->
        <!--begin::Items-->
    </div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-bs">
    <!--begin::Header-->
    <div class="card-header card-header-tabs-line">
        <div class="card-toolbar">
            <ul class="nav nav-tabs nav-tabs-space-lg nav-tabs-line nav-tabs-bold nav-tabs-line-3x" role="tablist">
                <li class="nav-item mr-3">
                    <a class="nav-link active" data-toggle="tab" href="#kt_apps_projects_view_tab_1">
                        <span class="nav-icon mr-2">
                            <span class="svg-icon mr-3">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Chat-check.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M4.875,20.75 C4.63541667,20.75 4.39583333,20.6541667 4.20416667,20.4625 L2.2875,18.5458333 C1.90416667,18.1625 1.90416667,17.5875 2.2875,17.2041667 C2.67083333,16.8208333 3.29375,16.8208333 3.62916667,17.2041667 L4.875,18.45 L8.0375,15.2875 C8.42083333,14.9041667 8.99583333,14.9041667 9.37916667,15.2875 C9.7625,15.6708333 9.7625,16.2458333 9.37916667,16.6291667 L5.54583333,20.4625 C5.35416667,20.6541667 5.11458333,20.75 4.875,20.75 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                        <path d="M2,11.8650466 L2,6 C2,4.34314575 3.34314575,3 5,3 L19,3 C20.6568542,3 22,4.34314575 22,6 L22,15 C22,15.0032706 21.9999948,15.0065399 21.9999843,15.009808 L22.0249378,15 L22.0249378,19.5857864 C22.0249378,20.1380712 21.5772226,20.5857864 21.0249378,20.5857864 C20.7597213,20.5857864 20.5053674,20.4804296 20.317831,20.2928932 L18.0249378,18 L12.9835977,18 C12.7263047,14.0909841 9.47412135,11 5.5,11 C4.23590829,11 3.04485894,11.3127315 2,11.8650466 Z M6,7 C5.44771525,7 5,7.44771525 5,8 C5,8.55228475 5.44771525,9 6,9 L15,9 C15.5522847,9 16,8.55228475 16,8 C16,7.44771525 15.5522847,7 15,7 L6,7 Z" fill="#000000" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                        </span>
                        <span class="nav-text font-weight-bold">Liste des contributeurs</span>
                    </a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link" data-toggle="tab" href="#kt_apps_projects_view_tab_2">
                        <span class="nav-icon mr-2">
                            <span class="svg-icon mr-3">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Devices/Display1.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M11,20 L11,17 C11,16.4477153 11.4477153,16 12,16 C12.5522847,16 13,16.4477153 13,17 L13,20 L15.5,20 C15.7761424,20 16,20.2238576 16,20.5 C16,20.7761424 15.7761424,21 15.5,21 L8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L11,20 Z" fill="#000000" opacity="0.3" />
                                        <path d="M3,5 L21,5 C21.5522847,5 22,5.44771525 22,6 L22,16 C22,16.5522847 21.5522847,17 21,17 L3,17 C2.44771525,17 2,16.5522847 2,16 L2,6 C2,5.44771525 2.44771525,5 3,5 Z M4.5,8 C4.22385763,8 4,8.22385763 4,8.5 C4,8.77614237 4.22385763,9 4.5,9 L13.5,9 C13.7761424,9 14,8.77614237 14,8.5 C14,8.22385763 13.7761424,8 13.5,8 L4.5,8 Z M4.5,10 C4.22385763,10 4,10.2238576 4,10.5 C4,10.7761424 4.22385763,11 4.5,11 L7.5,11 C7.77614237,11 8,10.7761424 8,10.5 C8,10.2238576 7.77614237,10 7.5,10 L4.5,10 Z" fill="#000000" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                        </span>
                        <span class="nav-text font-weight-bold">Liste des éditeurs</span>
                    </a>
                </li>
<!--                <li class="nav-item mr-3">-->
<!--                    <a class="nav-link" data-toggle="tab" href="#kt_apps_projects_view_tab_2">-->
<!--                        <span class="nav-icon mr-2">-->
<!--                            <span class="svg-icon mr-3">-->
<!--                                &lt;!&ndash;begin::Svg Icon | path:assets/media/svg/icons/Devices/Display1.svg&ndash;&gt;-->
<!--                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">-->
<!--                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">-->
<!--                                        <rect x="0" y="0" width="24" height="24" />-->
<!--                                        <path d="M11,20 L11,17 C11,16.4477153 11.4477153,16 12,16 C12.5522847,16 13,16.4477153 13,17 L13,20 L15.5,20 C15.7761424,20 16,20.2238576 16,20.5 C16,20.7761424 15.7761424,21 15.5,21 L8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L11,20 Z" fill="#000000" opacity="0.3" />-->
<!--                                        <path d="M3,5 L21,5 C21.5522847,5 22,5.44771525 22,6 L22,16 C22,16.5522847 21.5522847,17 21,17 L3,17 C2.44771525,17 2,16.5522847 2,16 L2,6 C2,5.44771525 2.44771525,5 3,5 Z M4.5,8 C4.22385763,8 4,8.22385763 4,8.5 C4,8.77614237 4.22385763,9 4.5,9 L13.5,9 C13.7761424,9 14,8.77614237 14,8.5 C14,8.22385763 13.7761424,8 13.5,8 L4.5,8 Z M4.5,10 C4.22385763,10 4,10.2238576 4,10.5 C4,10.7761424 4.22385763,11 4.5,11 L7.5,11 C7.77614237,11 8,10.7761424 8,10.5 C8,10.2238576 7.77614237,10 7.5,10 L4.5,10 Z" fill="#000000" />-->
<!--                                    </g>-->
<!--                                </svg>-->
<!--                                &lt;!&ndash;end::Svg Icon&ndash;&gt;-->
<!--                            </span>-->
<!--                        </span>-->
<!--                        <span class="nav-text font-weight-bold">Liste des factures Medicales</span>-->
<!--                    </a>-->
<!--                </li>-->
<!--                <li class="nav-item mr-3">-->
<!--                    <a class="nav-link" data-toggle="tab" href="#kt_apps_projects_view_tab_3">-->
<!--                        <span class="nav-icon mr-2">-->
<!--                            <span class="svg-icon mr-3">-->
<!--                                &lt;!&ndash;begin::Svg Icon | path:assets/media/svg/icons/Home/Globe.svg&ndash;&gt;-->
<!--                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">-->
<!--                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">-->
<!--                                        <rect x="0" y="0" width="24" height="24" />-->
<!--                                        <path d="M13,18.9450712 L13,20 L14,20 C15.1045695,20 16,20.8954305 16,22 L8,22 C8,20.8954305 8.8954305,20 10,20 L11,20 L11,18.9448245 C9.02872877,18.7261967 7.20827378,17.866394 5.79372555,16.5182701 L4.73856106,17.6741866 C4.36621808,18.0820826 3.73370941,18.110904 3.32581341,17.7385611 C2.9179174,17.3662181 2.88909597,16.7337094 3.26143894,16.3258134 L5.04940685,14.367122 C5.46150313,13.9156769 6.17860937,13.9363085 6.56406875,14.4106998 C7.88623094,16.037907 9.86320756,17 12,17 C15.8659932,17 19,13.8659932 19,10 C19,7.73468744 17.9175842,5.65198725 16.1214335,4.34123851 C15.6753081,4.01567657 15.5775721,3.39010038 15.903134,2.94397499 C16.228696,2.49784959 16.8542722,2.4001136 17.3003976,2.72567554 C19.6071362,4.40902808 21,7.08906798 21,10 C21,14.6325537 17.4999505,18.4476269 13,18.9450712 Z" fill="#000000" fill-rule="nonzero" />-->
<!--                                        <circle fill="#000000" opacity="0.3" cx="12" cy="10" r="6" />-->
<!--                                    </g>-->
<!--                                </svg>-->
<!--                                &lt;!&ndash;end::Svg Icon&ndash;&gt;-->
<!--                            </span>-->
<!--                        </span>-->
<!--                        <span class="nav-text font-weight-bold">Liste des factures pharmacetiques</span>-->
<!--                    </a>-->
<!--                </li>-->

<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" data-toggle="tab" href="#kt_apps_projects_view_tab_4">-->
<!--                        <span class="nav-icon mr-2">-->
<!--                            <span class="svg-icon mr-3">-->
<!--                                &lt;!&ndash;begin::Svg Icon | path:assets/media/svg/icons/General/Notification2.svg&ndash;&gt;-->
<!--                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">-->
<!--                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">-->
<!--                                        <rect x="0" y="0" width="24" height="24" />-->
<!--                                        <path d="M13.2070325,4 C13.0721672,4.47683179 13,4.97998812 13,5.5 C13,8.53756612 15.4624339,11 18.5,11 C19.0200119,11 19.5231682,10.9278328 20,10.7929675 L20,17 C20,18.6568542 18.6568542,20 17,20 L7,20 C5.34314575,20 4,18.6568542 4,17 L4,7 C4,5.34314575 5.34314575,4 7,4 L13.2070325,4 Z" fill="#000000" />-->
<!--                                        <circle fill="#000000" opacity="0.3" cx="18.5" cy="5.5" r="2.5" />-->
<!--                                    </g>-->
<!--                                </svg>-->
<!--                                &lt;!&ndash;end::Svg Icon&ndash;&gt;-->
<!--                            </span>-->
<!--                        </span>-->
<!--                        <span class="nav-text font-weight-bold">Liste des remboursements</span>-->
<!--                    </a>-->
<!--                </li>-->

                <!--<li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#kt_apps_projects_view_tab_5">
                        <span class="nav-icon mr-2">
                            <span class="svg-icon mr-3">
                                begin::Svg Icon | path:assets/media/svg/icons/General/Notification2.svg
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M13.2070325,4 C13.0721672,4.47683179 13,4.97998812 13,5.5 C13,8.53756612 15.4624339,11 18.5,11 C19.0200119,11 19.5231682,10.9278328 20,10.7929675 L20,17 C20,18.6568542 18.6568542,20 17,20 L7,20 C5.34314575,20 4,18.6568542 4,17 L4,7 C4,5.34314575 5.34314575,4 7,4 L13.2070325,4 Z" fill="#000000" />
                                        <circle fill="#000000" opacity="0.3" cx="18.5" cy="5.5" r="2.5" />
                                    </g>
                                </svg>
                                end::Svg Icon
                            </span>
                        </span>
                        <span class="nav-text font-weight-bold">Liste de demandes</span>
                    </a>
                </li>-->
            </ul>
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body px-0">
        <div class="tab-content pt-5">
            <!--begin::Tab Content-->
            <div class="tab-pane active" id="kt_apps_projects_view_tab_1" role="tabpanel">
                <!--begin: Datatable-->
                <div class="row">
                    <div class="col-12">
                       <div class="p-5">

                                <table class="table table-separate table-head-custom table-checkable" id="kt_datatable1">
                                    <thead>
                                        <tr>
                                            <th>
                                                Auteur
                                            </th>
                                            <th>
                                                Rôle
                                            </th>
                                        </tr>
                                    </thead>
                                    {% for auteur in auteurs %}
                                    <tbody>

                                            <tr>
                                                <td>
                                                    {{auteur.nom_contributeur}}
                                                </td>
                                                <td>
                                                    {{auteur.role}}
                                                </td>
                                            </tr>

                                    </tbody>
                                    {% endfor %}
                                </table>
                                <!--end: Datatable-->
                            </div>

                    </div>

                </div>
            </div>
            <!--end::Tab Content-->
            <!--begin::Tab Content-->
                        <div class="tab-pane" id="kt_apps_projects_view_tab_2" role="tabpanel">
                <!--begin: Datatable-->
                <div class="row">
                    <div class="col-12 table-responsive m-5">

                        <table class="table table-separate table-head-custom table-checkable" id="kt_datatable2">
                             <thead>
                                        <tr>
                                            <th>
                                                Editeur
                                            </th>
                                            <th>
                                                Année de publication
                                            </th>
                                        </tr>
                                    </thead>
                                    {% for editeur in editeurs %}
                                    <tbody>

                                            <tr>
                                                <td>
                                                    {{editeur.nom_editeur}}
                                                </td>
                                                <td>
                                                    {{editeur.date_edition}}
                                                </td>
                                            </tr>

                                    </tbody>
                                    {% endfor %}
                        </table>
                        <!--end: Datatable-->

                    </div>
                </div>
            </div>
<!--            <div class="tab-pane" id="kt_apps_projects_view_tab_2" role="tabpanel">-->
<!--                &lt;!&ndash;begin: Datatable&ndash;&gt;-->
<!--                <div class="row">-->
<!--                    <div class="col-12 table-responsive m-5">-->

<!--                        <table class="table table-separate table-head-custom table-checkable" id="kt_datatable2">-->
<!--                            <thead>-->
<!--                                <tr>-->
<!--                                    <th>-->
<!--                                        MATRICULE-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        NOM & PRENOMS-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        MONTANT TOTAL FACTURE-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        DATE EMISSION FACTURE-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        PART LDFG-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        PART ASSURE-->
<!--                                    </th>-->

<!--                                    <th>-->
<!--                                        ETABLISSEMENT-->
<!--                                    </th>-->


<!--                                    <th>ACTION</th>-->
<!--                                </tr>-->
<!--                            </thead>-->
<!--                            <tbody>-->

<!--                                <tr>-->
<!--                                    <td>-->

<!--                                    </td>-->
<!--                                    <td>-->

<!--                                    </td>-->
<!--                                    <td>-->

<!--                                    </td>-->

<!--                                    <td>-->

<!--                                    </td>-->
<!--                                    <td>-->

<!--                                    </td>-->
<!--                                    <td>-->

<!--                                    </td>-->

<!--                                    <td>-->

<!--                                    </td>-->
<!--                                    <td style="width: 125px;">-->


<!--                                        <span style="overflow: visible; position: relative; width: 125px;">-->


<!--                                            <a href="#">-->
<!--                                                <i class=" far fa-eye icon-md text-success mr-5"></i>-->
<!--                                            </a>-->


<!--                                        </span>-->

<!--                                    </td>-->

<!--                                </tr>-->

<!--                            </tbody>-->
<!--                        </table>-->
<!--                        &lt;!&ndash;end: Datatable&ndash;&gt;-->

<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <!--end::Tab Content-->
            <!--begin::Tab Content-->
<!--            <div class="tab-pane" id="kt_apps_projects_view_tab_3" role="tabpanel">-->
<!--                <div class="row">-->
<!--                    <div class="col-12 table-responsive m-5">-->

<!--                        <table class="table table-separate table-head-custom table-checkable" id="kt_datatable3">-->
<!--                            <thead>-->
<!--                                <tr>-->
<!--                                    <th>-->
<!--                                        MATRICULE-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        NOM & PRENOMS-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        PHARMACIE-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        NUMERO DE LA FACTURE-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        CODE D'AFFECTION-->
<!--                                    </th>-->
<!--                                    <th>-->
<!--                                        MONTANT TOTAL-->
<!--                                    </th>-->



<!--                                    <th>ACTION</th>-->
<!--                                </tr>-->
<!--                            </thead>-->
<!--                            <tbody>-->

<!--                                    <tr>-->
<!--                                        <td>-->

<!--                                        </td>-->
<!--                                        <td>-->

<!--                                        </td>-->
<!--                                        <td>-->

<!--                                        </td>-->

<!--                                        <td>-->

<!--                                        </td>-->
<!--                                        <td>-->

<!--                                        </td>-->
<!--                                        <td>-->

<!--                                        </td>-->


<!--                                        <td style="width: 125px;">-->


<!--                                            <span style="overflow: visible; position: relative; width: 125px;">-->


<!--                                                <a href="#">-->
<!--                                                    <i class=" far fa-eye icon-md text-success mr-5"></i>-->
<!--                                                </a>-->


<!--                                            </span>-->

<!--                                        </td>-->

<!--                                    </tr>-->

<!--                            </tbody>-->
<!--                        </table>-->
<!--                    </div>-->
<!--                    </div>-->
<!--                </div>-->
                    <!--end::Tab Content-->
                    <!--begin::Tab Content-->
<!--                    <div class="tab-pane" id="kt_apps_projects_view_tab_4" role="tabpanel">-->
<!--                        <div class="row">-->
<!--                            <div class="col-12 table-responsive m-5">-->

<!--                                <table class="table table-separate table-head-custom table-checkable" id="kt_datatable4">-->
<!--                                    <thead>-->
<!--                                        <tr>-->
<!--                                            <th>-->
<!--                                                MATRICULE-->
<!--                                            </th>-->
<!--                                            <th>-->
<!--                                                NOM & PRENOMS-->
<!--                                            </th>-->
<!--                                            <th>-->
<!--                                               TAUX-->
<!--                                            </th>-->
<!--                                            <th>-->
<!--                                                NUMERO DE LA FACTURE-->
<!--                                            </th>-->
<!--                                            <th>-->
<!--                                                MONTANT RECLAME-->
<!--                                            </th>-->
<!--                                            <th>-->
<!--                                                MONTANT A REGLER-->
<!--                                            </th>-->



<!--                                            <th>ACTION</th>-->
<!--                                        </tr>-->
<!--                                    </thead>-->
<!--                                    <tbody>-->

<!--                                            <tr>-->
<!--                                                <td>-->

<!--                                                </td>-->
<!--                                                <td>-->

<!--                                                </td>-->
<!--                                                <td>-->

<!--                                                </td>-->

<!--                                                <td>-->

<!--                                                </td>-->
<!--                                                <td>-->

<!--                                                </td>-->
<!--                                                <td>-->

<!--                                                </td>-->


<!--                                                <td style="width: 125px;">-->


<!--                                                    <span style="overflow: visible; position: relative; width: 125px;">-->


<!--                                                        <a href="#">-->
<!--                                                            <i class=" far fa-eye icon-md text-success mr-5"></i>-->
<!--                                                        </a>-->


<!--                                                    </span>-->

<!--                                                </td>-->

<!--                                            </tr>-->

<!--                                    </tbody>-->
<!--                                </table>-->
<!--                            </div>-->
<!--                            </div>-->
<!--                        </div>-->
                            <!--end::Tab Content-->
                            <!--begin::Tab Content-->
<!--                            <div class="tab-pane" id="kt_apps_projects_view_tab_5" role="tabpanel">-->

<!--                            </div>-->
                            <!--end::Tab Content-->
                        </div>
                    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
{% endblock %}