{% extends '@CadolesCore/base.html.twig' %}

{% block localstyle %}
    <style>
        body{ padding:10px; max-width: 350px; margin: auto; overflow:hidden !important; }
        #page-wrapper{background-color:transparent; padding: 0px;}

        .clock {
            color:#{{ colorbodyfont }}; 
            margin-top:10px;
            overflow:hidden;
        }

        #clockdate {
            font-size:15px;
            text-align:center;
            margin-top: -30px;
        }

        .clock ul {
            margin:0 auto;
            padding:0px;
            list-style:none;
            text-align:center;
        }
        
        .clock ul li {
            display:inline;
            font-size:50px;
            text-align:center;
            font-weight:bold;
        }

        #clockpoint {
            position:relative;
            padding-left:10px;
            padding-right:10px;
        }

        #clockdate { margin:0px auto; color: #{{ colorbodyfont }}; text-align: center; font-size:18px; }

    </style>
{% endblock %}



{% block pagewrapper %}
<div class="clock">
<ul>
	<li id="clockhours"> </li>
    <li id="clockpoint">:</li>
    <li id="clockmin"> </li>

</ul>
<div id="clockdate"></div>
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        // Create two variable with the names of the months and days in an array
        var monthNames = [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]; 
        var dayNames= ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"]

        // Create a newDate() object
        var newDate = new Date();
        // Extract the current date from Date object
        newDate.setDate(newDate.getDate());
        // Output the day, date, month and year    
        $('#clockdate').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

        
        setInterval( function() {
            // Create a newDate() object and extract the minutes of the current time on the visitor's
            var minutes = new Date().getMinutes();
            // Add a leading zero to the minutes value
            $("#clockmin").html(( minutes < 10 ? "0" : "" ) + minutes);
            },1000);
        
        setInterval( function() {
            // Create a newDate() object and extract the hours of the current time on the visitor's
            var hours = new Date().getHours();
            // Add a leading zero to the hours value
            $("#clockhours").html(( hours < 10 ? "0" : "" ) + hours);
            }, 1000);


    });
{% endblock %}