{% extends "Includes/layout_ats.html.twig" %}

{% block title %}Daf ATS{% endblock %}

{% block pageheader %}Daf ATS{% endblock %}

{% block body %}
    {% set breadcrumb_nav = "home" %}
    {% set proxy_url = "https://image.goldenbees.fr/images?w=400&h=400&transfo=fit&imgurl=" %}

    <main class="row main mx-0 min-vw-100">
        {{ include('Includes/aside_ats.html.twig') }}

        <section class="content-area p-r-l-6">

            <div class="container">
                {#            START SIMPLE DATA TABLES FOR FORMS       #}
                <h2 class="lead py-5">Advertisers</h2>

                <div class="row d-flex container-cards mb-5 pb-5 justify-content-center">
                    {% set lengthData = advertisers|length %}
                    
                    {% for advertiser in advertisers %}

                        {% set static_path = advertiser.name|lower|replace({' ': ''})|replace({'à':'a', 'ê':'e', 'é':'e', 'è':'e'}) %}

                        {% if lengthData < 12 %}
                            <div class="col-md-3 mb-2 px-0 mr-2">
                                <a href="{{ is_granted('ROLE_DAF') ? path('ats_overview', {'id': advertiser.id })
                                : is_granted('ROLE_ANALYTICS') ? path('ats_roi_overview', {'id': advertiser.id })
                                : path('ats_offers', {'advertiser': advertiser.id}) }}" class="text-decoration-none d-flex flex-column justify-content-between">

                                    <div class="card-select-connection card border-0 p-3 w-100 d-flex justify-content-between" style="height: 240px; border-radius: 5px">
                                        <div class="logo py-3 flex-column d-flex justify-content-between" style="height: 160px;">

                                            {% if static_path %}
                                                <img src="{{ proxy_url }}{{ advertiser.logo|url_encode }}" alt="" style="width: auto; height: 40px" class="mx-auto img-fluid">
                                            {% else %}
                                                <img src="{{ asset('Dashboard/img/backup.jpg') }}" alt="" style="width: auto; height: 40px" class="mx-auto img-fluid">
                                            {% endif %}

                                            <div class="row text-center flex-column">
                                                <span class="mx-auto font-600"> {{ advertiser.name|title  }}</span>
                                            </div>
                                        </div>

                                        {% if is_granted('ROLE_DAF') %}
                                            <div class="data-global mb-3 mt-4 d-flex justify-content-between small px-4 flex-column">
                                                 <div class="d-flex justify-content-between mb-2">
                                                     <span>
                                                        <i class="fal fa-user-friends mr-2 font-300"></i>
                                                         <b>{{ nbApplies[advertiser.id].appliesCount }}</b>  {{ 'applies'|trans }}
                                                    </span>
                                                     <span><i class="far fa-bookmark mr-2 font-300"></i><b>{{ nbApplies[advertiser.id].jobsCount|number_format(0, ".", " ") }}</b> {{ 'jobs'|trans }}</span>
                                                 </div>
                                                   <div class="">
                                                       <span><i class="fa fa-tachometer-alt mr-2 font-300"></i><b>{{ nbApplies[advertiser.id].dafsCount }}</b> {{ 'forms'|trans }}</span>
                                                   </div>
                                            </div>
                                        {% endif %}

                                        <div class="d-flex justify-content-between">
                                            <span class="text-decoration-none mr-auto font-300"></span>
                                            <span class="chips {{ advertiser.active == 'true' ? 'chips_green' : 'chips_red' }}">
                                            {% if advertiser.active == 'true' %}
                                                {{ 'active'|trans }}
                                            {% else %}
                                                {{ 'inactive'|trans }}
                                            {% endif %}
                                        </span>
                                        </div>
                                    </div>

                                </a>
                            </div>
                        {% else %}
                            <div class="col-sm-3 mb-2 px-0 mr-2 bg-white">
                                <a href="{{ is_granted('ROLE_DAF') ? path('ats_overview', {'id': advertiser.id })
                                : is_granted('ROLE_ANALYTICS') ? path('ats_roi_overview', {'id': advertiser.id })
                                : path('ats_offers', {'advertiser': advertiser.id}) }}" class="text-decoration-none d-flex h-100 px-3">

                                    {% if is_granted('ROLE_DAF') %}
                                        <div class="logo w-25 my-auto mx-0">
                                            {% if static_path %}
                                                <img src="{{ proxy_url }}{{ advertiser.logo|url_encode }}" alt="" style="width: 70px;" class="mx-auto img-fluid">
                                            {% else %}
                                                <img src="{{ asset('Dashboard/img/backup.jpg') }}" alt="" style="width: auto; height: 40px" class="mx-auto img-fluid">
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                    <div class="content-data-card p-2 {{ 'ROLE_ANALYTICS' in roles ? 'w-100' : 'w-75'}}">
                                       <div class="top-content d-flex justify-content-between">
                                           <span class="font-600"> {{ advertiser.name|title  }}</span>
                                           <div class="">
                                               <span class="chips {{ advertiser.active == 'true' ? 'chips_green' : 'chips_red' }}">
                                                    {% if advertiser.active == 'true' %}
                                                        {{ 'active'|trans }}
                                                    {% else %}
                                                        {{ 'inactive'|trans }}
                                                    {% endif %}
                                                </span>
                                           </div>
                                       </div>

                                        {% if is_granted('ROLE_DAF') %}
                                            <div class="data-global mb-3 mt-4 d-flex justify-content-around small ml-3 flex-column">
                                                    <span class="opacity-06"><i class="fal fa-user-friends mr-2 font-300"></i><b>{{ nbApplies[advertiser.id].appliesCount }}</b>  {{ 'applies'|trans }}</span>
                                                    <span class="mt-2 opacity-06"><i class="far fa-bookmark mr-2 font-300"></i><b>{{ nbApplies[advertiser.id].jobsCount|number_format(0, ".", " ") }}</b> {{ 'jobs'|trans }}</span>
                                                    <span class="mt-2 opacity-06"><i class="fa fa-tachometer-alt mr-2 font-300"></i><b>{{ nbApplies[advertiser.id].dafsCount }}</b> {{ 'forms'|trans }}</span>
                                            </div>
                                        {% else %}
                                            <div class="logo w-100 my-auto">
                                                {% if static_path %}
                                                    <img src="{{ proxy_url }}{{ advertiser.logo|url_encode }}" alt="" style="width: 70px;" class="mx-auto img-fluid">
                                                {% else %}
                                                    <img src="{{ asset('Dashboard/img/backup.jpg') }}" alt="" style="width: auto; height: 40px" class="mx-auto img-fluid">
                                                {% endif %}
                                            </div>
                                        {% endif %}

                                    </div>
                                </a>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </section>
    </main>

    <script type="text/javascript">
        $(document).ready(function () {
            ScrollReveal().reveal('.container-cards', { delay: 1000 })
        });

    </script>
{% endblock %}