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

{% set array_title = {'mine':'Mes actions', 'historique':'Historique des actions', 'en_cours': 'Actions en cours'} %}

{% set array_role = {'mine':'ROLE_AFFICHER_ACTIONS', 'historique':'ROLE_AFFICHER_HISTORIQUE_ACTIONS'} %}

{% block title %} COSAP - {{ array_title[app.request.get('type')] }} {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="/template/app-assets/css/core/colors/palette-gradient.css">
    <link rel="stylesheet" type="text/css" href="/template/app-assets/css/pages/timeline.css">
    <link rel="stylesheet" type="text/css" href="/template/app-assets/fancybox/jquery.fancybox.css">
    <style type="text/css">
        tbody{
            line-height: 40px;
            font-size: 12px !important;
        }

        .title span{
            font-size: 12px !important;
        }

        .app-contacts .chat-fixed-search {
            /*position: fixed;*/
            z-index: 999;
            background: #FFFFFF;
            width: 300px;
            border-bottom: 1px solid #E4E7ED;
            height:120px
        }

        .orgchart {
            background: #fff;
        }
        .orgchart td.left, .orgchart td.right, .orgchart td.top {
            border-color: #aaa;
        }
        .orgchart td>.down {
            background-color: #aaa;
        }
        .orgchart .middle-level .title {
            background-color: #7FC3C0;
        }
        .orgchart .middle-level .content {
            border-color: #7FC3C0;
        }
        .orgchart .product-dept .title {
            background-color: #4682B4;
        }
        .orgchart .product-dept .content {
            border-color: #4682B4;
        }
        .orgchart .rd-dept .title {
            background-color: #993366;
        }
        .orgchart .rd-dept .content {
            border-color: #993366;
        }
        .orgchart .pipeline1 .title {
            background-color: #cbb545;
        }
        .orgchart .pipeline1 .content {
            border-color: #cbb545;
        }
        .orgchart .frontend1 .title {
            background-color: #cc0066;
        }
        .orgchart .frontend1 .content {
            border-color: #cc0066;
        }
        .orgchart .frontend2 .title {
            background-color: #cb25ed;
        }
        .orgchart .frontend2 .content {
            border-color: #cb25ed;
        }

        .orgchart .second-menu-icon {
            transition: opacity .5s;
            opacity: 0;
            right: -5px;
            top: -5px;
            z-index: 2;
            color: rgba(68, 157, 68, 0.5);
            font-size: 18px;
            position: absolute;
        }
        .orgchart .second-menu-icon:hover {
            color: #449d44;
        }
        .orgchart .node:hover .second-menu-icon {
            opacity: 1;
        }
        .orgchart .second-menu-icon {
            transition: opacity .5s;
            opacity: 0;
            right: -5px;
            top: -5px;
            z-index: 2;
            color: rgba(68, 157, 68, 0.5);
            font-size: 18px;
            position: absolute;
        }
        .orgchart .second-menu-icon:hover {
            color: #449d44;
        }
        .orgchart .node:hover .second-menu-icon {
            opacity: 1;
        }
        .orgchart .node .second-menu {
            display: none;
            position: absolute;
            top: 0;
            right: -70px;
            border-radius: 35px;
            box-shadow: 0 0 10px 1px #999;
            background-color: #fff;
            z-index: 1;
        }
        .orgchart .node .second-menu .avatar {
            width: 60px;
            height: 60px;
            border-radius: 30px;
            float: left;
            margin: 5px;
        }

        .orgchart .node .title .action_vue{
            float:center;
            margin-top: 4px;
            margin-right: 5px;
            margin-left: 2px
        }

        .orgchart .node .title .symbol{
            display:none;
        }

        .table th, .table tbody td {
            padding-left:5px;
            padding-right:5px;
        }
        .popover{
            z-index:unset;
        }


        .class_blocked_action{
            background-color:#fea2a2;
        }

        .class_to_do__action{
            background-color:#8beda8;
        }

        .class_waiting_action{
            background-color :#fad58e;
        }

        .class_new_action{
            background-color :#84def2;
            ;
        }

        .badge-pill {
            padding-right: 0.4em !important;
            padding-left: 0.4em !important;
        }

        /*-------------------------------------------*/
        .alarme_icon{
            box-shadow:0px 0px 10px red;
            -webkit-animation-name: clignote_alarme; /*on affecte l'animation clignote à notre bouton*/
            -webkit-animation-duration: 1s; /*on définit la durée de l'animation à 1s */
            -webkit-animation-iteration-count:infinite; /*on dit que l'animation se répétera à l'infini.*/
        }

        @-webkit-keyframes clignote_alarme {
            0%{
                box-shadow:0px 0px 10px red;
            }
            50%{
                box-shadow:0px 0px 0px red;
            }
            100%{
                box-shadow:0px 0px 10px red;
            }
        }

        /*----------------------------------------------*/

        .alarme_clock{
            box-shadow:0px 0px 10px rgb(82, 92, 233);
            -webkit-animation-name: clignote_clock; /*on affecte l'animation clignote à notre bouton*/
            -webkit-animation-duration: 1s; /*on définit la durée de l'animation à 1s */
            -webkit-animation-iteration-count:infinite; /*on dit que l'animation se répétera à l'infini.*/
        }

        @-webkit-keyframes clignote_clock {
            0%{
                box-shadow:0px 0px 10px rgb(82, 92, 233);
            }
            50%{
                box-shadow:0px 0px 0px rgb(82, 92, 233);
            }
            100%{
                box-shadow:0px 0px 10px rgb(82, 92, 233);
            }
        }

        /*-------------------------------------------------*/

        .no-border {
            border: none !important;
            cursor: default !important;
            padding-left: 0;
        }
        .inputVerif{
            display: inline-flex !important;
            margin-bottom: 0 !important;
            margin-top: 2rem;
        }
        .mr-btn{
            margin-right: 2px;
        }
        .table tbody td {
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>


{% endblock %}

{% block body %}
    {{ parent() }}
    {{ include('Actions/right_side.html.twig') }}
    {{ include('Actions/modals/modals_actions.html.twig') }}

{% endblock %}
{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript" src="/template/app-assets/fancybox/jquery.fancybox.min.js"></script>

    <script type="text/javascript">

        $('#dateDebut').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#dateFin').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});


        $('#date_fin_limite').bootstrapMaterialDatePicker({
            format: 'YYYY-MM-DD HH:mm',
            lang: 'fr',
            weekStart: 1,
            disabledDays: [],
            time: true,
            cancelText: 'Annuler',
            switchOnClick: true
        });

        $("#clear_date_fin_limite").click(function () {

            $('#date_fin_limite').val("");

        });
        $('.summernote').summernote({
            lang: "fr-FR",
            height: 120
        });

        $(".word").fancybox({

            'type': 'iframe'

        });

        $('.show-fancybox').fancybox();

        {% for flash_message in app.session.flashBag.get('success') %}

            toastr.success('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('info') %}

            toastr.info('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}


        {% for flash_message in app.session.flashBag.get('warning') %}

            toastr.warning('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('error') %}

            toastr.error('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}
    </script>

    {% include('Actions/ajax/action.html.twig') %}
    {% include('Actions/ajax/delete.html.twig') %}
    {% include('Actions/ajax/commentaire.html.twig') %}
    {% include('Actions/ajax/modulesProjet.html.twig') %}

{% endblock %}