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

{% block localstyle %}
    <style>
        body{ padding:10px; max-width: 350px; margin: auto; overflow:hidden !important; }
        #page-wrapper{background-color:transparent; padding: 0px;}
        #clockdate { margin:10px auto; color: #{{ colorbodyfont }}; text-align: center; font-size:18px; }
    </style>
{% endblock %}



{% block pagewrapper %}
    <div id="clock" style="width:80%; max-width:120px;margin:auto;background-color:#{{ colorbodyfont }}"></div>
    <div id="clockdate"></div>    
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $('#clock').jsRapClock({});

        // 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());
    });
{% endblock %}


