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

{% block localstyle %}
    .homecard {
        margin: 20px 20px 0px 0px;
        float:left;
    }

    table {
        
    }

    th,td {
        border: 1px solid #37474F;
        color: #ffffff;
        background-color:#37474F;
        text-align:center;
        width: 70px;
    }
    td {
        background-color:#e8ecf1;
        cursor: help;
        height: 44px;
        vertical-align: top;
        color: #ffffff;        
    }

    .date {
        font-size: 9px;
        color: #37474F;
    }

    .allday {
        font-size: 12px;
        float:left;
        width:100%;
        height: 18px;         
    }

    .am, .ap {
        font-size: 12px;
        float:left;
        width:50%;   
        height: 18px;      
    }

    .astreinte {
        font-size: 11px;
        float:left;
        width:100%;  
        height:12px;       
    }      
{% endblock %}


{% block body %}
    {% if fgprint is defined and fgprint %}<h1>Synthèse</h1>{%endif%}
    {% for user in users %}
        {% set nbday=1 %}

        <div class="card homecard" style="width:380px;">
            <div class="card-header">
                <img src="\{{appAlias}}\uploads\avatar\{{user.user.avatar}}" class='avatar no-print'>
                {{ user.user.displayname }}
            </div>            
            <div class="card-body">
                <table>
                    <thead>
                        <th>S</th>
                        <th>L</th>
                        <th>M</th>
                        <th>M</th>
                        <th>J</th>
                        <th>V</th>
                        <th>S</th>
                        <th>D</th>
                    </thead>

                {% for event in user.events %}
                    {% if nbday==1 %} 
                        <tr>
                        <td class="date" style="vertical-align:middle">{{event.date|date("W")}}</td>
                    {% endif %}       
                    <td>
                        <div class="date">{{ event.date | date("d/m") }}</div>
                        {% if event.allday %}
                            <div class='allday' style='background-color:{{ event.colorday }};' title='{{ event.descriptionday }}'>1</div>
                        {% else %}
                            {%if event.am %}
                                <div class='am' style='background-color:{{ event.coloram }};' title='{{ event.descriptionam }}'>0.5</div>
                            {% else %}
                                <div class='am'></div>
                            {% endif %}

                            {%if event.ap %}
                                <div class='ap' style='background-color:{{ event.colorap }};' title='{{ event.descriptionap }}'>0.5</div>
                            {% else %}
                                <div class='ap'></div>
                            {% endif %}
                        {% endif %}

                        {% if event.astreinte %}
                            <div class='astreinte' style='background-color:{{ event.colorastreinte }};' title='{{ event.descriptionastreinte }}'>*</div>
                        {% else %}
                            <div class='astreinte'></div>
                        {% endif %}
                    </td>

                    {% set nbday=nbday+1 %}
                    {% if nbday==8 %} 
                        </tr>
                        {% set nbday=1 %}
                    {% endif %}       

                    
                {% endfor %}
                </table>
            </div>
        </div>

        {% if (loop.index % 2) == 0 %} <div class="new-page">&nbsp;</div> {% endif %}
    {% endfor %}
{% endblock %}

{% block localjavascript %}
    function myprint() {
        document.location.href="{{path(app.request.attributes.get('_route'),{fgprint:true})}}";
    }
{% endblock %}