<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      {% block head %}
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="{{app.config.app_url}}/app/themes/default/resources/materialize/css/materialize.min.css"  media="screen,projection"/>
		<link type="text/css" rel="stylesheet" href="{{app.config.app_url}}/app/themes/default/resources/material-datatable.css"  media="screen,projection"/>
	
	  <link type="text/css" rel="stylesheet" href="{{app.config.app_url}}/app/themes/default/resources/sweetalert2/sweetalert2.min.css" />
			{% include 'themes/default/resources/style.css.html' %}
       <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>{% if modulelabel is defined %}{{modulelabel|trans}}{% else %}{{modulename|trans}}{%endif%} - {% if app.config.portal_title is defined and app.config.portal_title!="" %}{{app.config.portal_title}}{% else %}MYC Customer Portal{% endif %}</title>
      {% endblock %}
      
      <style>
	      html, body, main{
		      height: 100% !important;
		      min-height: 100% !important;
	      }
	      
	      {% if view_name is defined and view_name=="popup" %}
	      		.side-nav{
		      		display: none;
	      		}
	      		header,main,footer{
		      		padding-left: 0px;
	      		}
	      		.open-sidebar{
		      		display: none;
	      		}
	      {% endif %}


}

      </style>
    </head>

    <body  class="">
    	 <div class="se-pre-con"></div>
    <header>
      {% block navigation %}
      
      <nav class="{{app.config.theme_basic_color}} lighten-2 top-nav" >	    
	    <div class="nav-wrapper" style="margin:0px 10px 0px 10px;">
	      <a href="#" data-activates="slide-out" class="button-collapse open-sidebar"><i class="material-icons">menu</i></a>
	      <a href="#" class="brand-logo light">
		      {% if app.modules[modulename].icon is defined %} 
		      <i class="material-icons">{{app.modules[modulename].icon}}</i>
		      {% endif %}
		      {{modulename|trans}}</a>
		  
	      <ul id="nav-mobile" class="right " >
	        <li><a class="dropdown-button waves-effect hide-on-med-and-down" href="#!" data-activates="dropdown1">{{app.logged_customer.email}} <canvas id="user-icon" style="border-radius:50%;margin-left: 8px;vertical-align: middle;" width="32" height="32"></canvas> </a>
	        	<a class="dropdown-button waves-effect hide-on-large-only" href="#!" data-activates="dropdown1"><i class="material-icons">person</i></a>
	        </li>
         </ul>

	    </div>
	  </nav>

<ul id="dropdown1" class="dropdown-content"  >
 <li><a href="{{app.config.base_url}}/profile" class="waves-effect"><i class="material-icons left">settings</i> {{'LBL_MY_PREFERENCES'|trans}}</a></li>	        
 <li><a href="{{app.config.base_url}}/logout"  class="waves-effect"><i class="material-icons left">power_settings_new</i> {{'LBL_SIGN_OUT'|trans}}</a></li>
</ul>

<ul id="slide-out" class="side-nav fixed {% if app.config.theme_colored_sidebar %}{{app.config.theme_basic_color}}{% endif %}" style="width:240px" >
      <div class="valign-wrapper side-logo logo white"><a class="brand-logo valign" href="#!"><img src="{{app.config['app_url']}}/app/themes/default/resources/images/{{app.config.portal_logo}}"></a></div>
      
      <li style="margin-top:14px;" class="{% if modulename == 'Dashboard' %}active {% endif %}{% if 'Dashboard' == modulename and app.config.theme_colored_sidebar %}white{% elseif 'Dashboard' == modulename %} {{app.config.theme_basic_color}}{% endif %}"><a style="font-size: 14px; font-weight: 300;" class="waves-effect waves-{{app.config.theme_basic_color}}  {% if app.config.theme_colored_sidebar and 'Dashboard' != modulename %}{{app.config.theme_basic_color}}{% endif %} {% if app.config.theme_colored_sidebar and 'Dashboard' == modulename %}{{app.config.theme_basic_color}}-text white{% elseif app.config.theme_colored_sidebar %}white-text{% endif %}" href="javascript:gotoPage('{{app.config.base_url}}/home/')">
	      <i style="font-size: 1.3rem" class="material-icons small {% if app.config.theme_colored_sidebar and 'Dashboard' == modulename %}{{app.config.theme_basic_color}}-text{% elseif app.config.theme_colored_sidebar %}white-text{% endif %}">home</i>&nbsp;&nbsp;{{'LBL_DASHBOARD'|trans}}</a></li>
	      
	      
	      
      {% for module in app.modules %}
	  		<li class="{% if module.route.route == current_route %}active{% endif %} {% if module.route.route == current_route and app.config.theme_colored_sidebar %}white{% elseif module.route.route == current_route %} {{app.config.theme_basic_color}}{% endif %}" >
	  			<a style="font-size: 14px; font-weight: 300;"  class="waves-effect waves-{{app.config.theme_basic_color}} {% if app.config.theme_colored_sidebar and module.route.route != current_route %}{{app.config.theme_basic_color}}{% endif %} {% if app.config.theme_colored_sidebar and module.route.route == current_route %}{{app.config.theme_basic_color}}-text white{% elseif app.config.theme_colored_sidebar %}white-text{% endif %}" href="javascript:gotoPage('{{app.config.base_url}}/{{module.route.route}}')" >
	  			{% if module.icon is defined %}
	  				<i style="font-size: 1.3rem" class="material-icons small {% if app.config.theme_colored_sidebar and module.route.route == current_route %}{{app.config.theme_basic_color}}-text{% elseif app.config.theme_colored_sidebar %}white-text{% endif %}">{{module.icon}}</i>&nbsp; 
	  			{% endif %}
	  			{{ module.route.label|trans }}	
	  			</a>
	  		</li>
	  {% endfor %}
      
    </ul>

    </header>   
     
     
      {% endblock %}
    <main>
      
      <div style="margin:20px 10px 0px 10px;">
      
      {% for message in app.session.getFlashBag.get('error_message') %}
      	<div class="row" style="margin-bottom:0px">
	        <div class="col s12 m12">
		        <div class="card red">
		            <div class="card-content white-text">
				    	{{ message|trans }}
		            </div>
		        </div>
	        </div>
      	</div>
	  {% endfor %}
	  
	  {% for message in app.session.getFlashBag.get('success_message') %}
      	<div class="row" style="margin-bottom:0px">
	        <div class="col s12 m12">
		        <div class="card green">
		            <div class="card-content white-text">
				    	{{ message|trans }}
		            </div>
		        </div>
		        
	        </div>
      	</div>
	  {% endfor %}
	  
	  <div class="bodyContent">
      {% block body %} {% endblock %}
	  </div>
      
      
      </div>
      
<!--
  <div class="valign-wrapper mycloader center-align" >
  <div id="loader-wrapper">
      <div id="loader"></div>     
      <img src="{{app.config.base_url}}/app/themes/default/resources/images/gears.gif">
      <i class="zmdi zmdi-rotate-right zmdi-hc-spin"></i>   
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
  </div>
      </div>
-->
      
      
           
    </main>
    
      	  {% block footer %}

          {% endblock %}

             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
//paste this code under the head tag or in a separate js file.
	// Wait for window load
	$(window).load(function() {
		// Animate loader off screen
		$(".se-pre-con").fadeOut("slow");
	});
</script>


      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/materialize/js/materialize.min.js"></script>
      <script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/sweetalert2/sweetalert2.min.js"></script>
      
      
      <script>
      

      $(function(){
      	  $('.mycloader').hide();
	      $(".button-collapse").sideNav();
	      $('select').material_select();
	      $('.modal').modal();
	      
	  });
	  
	  function gotoPage(url){	  
		  $(".se-pre-con").fadeIn("fast",function() {
			if(url.substr(-1) != '/' && url.match(/\?./)===null){
				url = url+"/";
			}
		    window.location=url;
		  });		  
		  
	  }
	  
	  function submitForm(formid){
		  $(".se-pre-con").show();
		  $('.mycloader').show();
		  $("#"+formid).submit();
	  }
	  
	
	  
      </script>
      
      <script>
      var colours = ["{{app.config.theme_basic_color}}"];

var name = "{{app.logged_customer.email}} ",
    nameSplit = name.split(" "),
    initials = nameSplit[0].charAt(0).toUpperCase();


var charIndex = initials.charCodeAt(0) - 65,
    colourIndex = charIndex % 1;

var canvas = document.getElementById("user-icon");
var context = canvas.getContext("2d");

var canvasWidth = $(canvas).attr("width"),
    canvasHeight = $(canvas).attr("height"),
    canvasCssWidth = canvasWidth,
    canvasCssHeight = canvasHeight;

if (window.devicePixelRatio) {
    $(canvas).attr("width", canvasWidth * window.devicePixelRatio);
    $(canvas).attr("height", canvasHeight * window.devicePixelRatio);
    $(canvas).css("width", canvasCssWidth);
    $(canvas).css("height", canvasCssHeight);
    context.scale(window.devicePixelRatio, window.devicePixelRatio);
}

context.fillStyle = colours[colourIndex];
context.fillRect (0, 0, canvas.width, canvas.height);
context.font = "26px Arial";
context.textAlign = "center";
context.fillStyle = "#FFF";
context.fillText(initials, canvasCssWidth / 2, canvasCssHeight / 1.3);


$(document).ready(function(){
    $('.materialboxed').materialbox();
});

</script>

      {% block footerscripts %}

      {% endblock %}
      

    </body>
</html>
