<!DOCTYPE html>
  <html>
    <head>
      {% block head %}
      <title>{{ title | default("") }} - Pythonic</title>
      {# Import Google Icon Font #}
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      {# Import materialize.css #}
      <link type="text/css" rel="stylesheet" href="{{ url_for('static' ,filename='css/materialize.min.css') }}"  media="screen,projection"/>
      <meta charset="UTF-8">

      {# Let browser know website is optimized for mobile #}
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
        <style type="text/css">
            .blocs{
            height: 250px;
            /*background-color: #EFE;*/
            }
            .blocs p.foot{
                font-size: 12px;
                color:#ccc;
            }
        </style>
      {% endblock %}
    </head>

    <body>
         <nav>
            <div class="nav-wrapper {{ dash_color | default('') }}">
                <ul class="left">
                   <li><a {% if dash_color == "white" %}class="black-text"{% endif %} href="{{ home_target | default('/') }}"><i class="material-icons">{{ home_icon | default('home') }}</i></a></li>
                </ul> 
                <a href="{% if title_url %}{{ title_url }}{% else %}#!{% endif %}" class="left"><h5 {% if dash_color == "white" %}class="black-text"{% endif %}>{{ title | default("<no title>") }}</h5></a>
                <ul class="right">
                    {% block actions %}
                    {# Actions icons on the top-right #}
                    <li><a href="#"><i class="material-icons">lock_outline</i></a></li>
                    <li><a href="#"><i class="material-icons">import_export</i></a></li>
                    <li><a href="#"><i class="material-icons">build</i></a></li>
                    <li><a href="#"><i class="material-icons">add</i></a></li>
                    {% endblock %}
                </ul>
            </div>
        </nav>
        
        <div class="container">
            {# Page Content goes here #}
            {% block content %}{% endblock %}
        </div>
           
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
      <script type="text/javascript" src="{{ url_for( 'static', filename='js/materialize.min.js') }}"></script>
      <script type="text/javascript" src="{{ url_for( 'static', filename='js/block.js') }}" ></script>
      <script type="text/javascript" src="{{ url_for( 'static', filename='js/mqtt.js') }}" ></script>
      <script type="text/javascript">
      <!--
         M.AutoInit();
         _mqtt_notifiable = Object.create( MqttNotifiable ); // component that can be notified for mqtt messages
        $(document).ready(function(){
          {#- Needed for html select ui -#}
          $('select').formSelect();
          
          {#- Toasting Flash Messages #}
          {% with messages = get_flashed_messages(with_categories=true) -%}
            {%- if messages -%}
              {%- for categ, message in messages -%}
                {%- if categ == 'error' -%}
                  {%- set cls = 'red-text' -%}
                  {%- set msg = '[ERREUR] '+ message -%}
                  M.toast({html: "<strong>{{ msg }}</strong>", classes: "{{ cls }}" });
                {%- else -%}
                  {%- set cls = '' -%}
                  {%- set msg = message -%}
                  M.toast({html: "{{ msg }}", classes: "{{ cls }}" });
                {%- endif -%}
              {% endfor -%}
            {%- endif -%}
          {%- endwith -%}
          // M.toast({html: 'Flash done'});

          {#- Attach event to switch_block #}
          $('[id^="checkbox_switch_"]').each( function(){ 
            console.log( 'attach events to ' + $(this)[0].id );
            $(this)[0].onchange = on_switch_change;
            $(this)[0].onmqttmessage = on_switch_mqtt_message;
            // append notifiable object ( DOM object, id of BlockConfigs[]
            _mqtt_notifiable.append( $(this)[0], block_config_id_from_id( $(this)[0].id ) );
          } );

          {#- Custom onDocumentReady Javascrit content -#}
          {% block onDocumentReady %}{% endblock %}
        });

        {% block javascript %}
        {% endblock %}
       -->
      </script>
    </body>
  </html>
