<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{$title} | {siteTitle}</title>
    <base href="{=BASE_URL}" target="_self">
    <meta name="MobileOptimized" content="320">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" media="screen" href="public/css/ink.min.css" />
    <link rel="icon" type="image/png" href="public/images/lemon-24.png">
    <style>
     html, body {
       height: 100%;
     }
     .ink-navigation ul.menu.MediumSeaGreen {
       background: #3CB371;
     }
     .ink-navigation ul.menu.MediumSeaGreen li a {
       color: #fff;
       text-decoration: none;
     }
     .ink-navigation ul.menu.MediumSeaGreen li a:hover {
       background: #38a86a;
     }
     .ink-navigation ul.menu li:hover > ul.submenu {
       display: block;
     }
     .ink-navigation ul.menu.MediumSeaGreen > li ul.submenu li {
       font-size: .875em;
     }
     .ink-navigation ul.menu.MediumSeaGreen > li ul.submenu li a {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
     .ink-navigation ul.menu.MediumSeaGreen li ul.submenu {
       background: #fff;
       border: 1px solid rgba(0, 0, 0, 0.1);
     }
     .ink-navigation ul.menu.MediumSeaGreen li ul.submenu li a {
       color: #555;
     }
     .ink-navigation ul.menu.MediumSeaGreen li ul.submenu li a:hover {
       background: rgba(0, 0, 0, 0.05);
     }
     .wrap {
       min-height: 100%;
       height: auto !important;
       height: 100%;
       margin: 0 auto -60px;
       overflow: auto;
     }
     .push, footer {
       height: 60px;
       margin-top: 0;
     }
     footer {
       background: #ccc;
       border: 0;
     }
     footer * {
       line-height: inherit;
     }
    </style>
  </head>
  <body>
    {var $mediumDate = IoC::resolve( 'i18n' )->__( 'medium_date_format' )}
    <div class="wrap">
      <header>
        <nav class="ink-navigation">
          {var $menu = new \library\BackendMenu()}
          {var $class = 'menu horizontal MediumSeaGreen'}
          {block menu}
          <ul class="{$class}">
            {foreach $menu as $item}
            <li><a href="{$item['url']}">{_}{$item['name']}{/_}</a>
              {ifset $item['submenu']}
              {include menu, menu => $item['submenu'], class => 'submenu'}
              {/ifset}
            </li>
            {/foreach}
          </ul>
          {/block}
        </nav>
      </header>
      <div class="ink-grid">
        {ifset $flash['error']}
        <div class="ink-alert basic error" role="alert">
          <button class="ink-dismiss">&times;</button>
          <p>{$flash['error']}</p>
        </div>
        {/ifset}
        {ifset $flash['warning']}
        <div class="ink-alert basic warning" role="alert">
          <button class="ink-dismiss">&times;</button>
          <p>{$flash['warning']}</p>
        </div>
        {/ifset}
        {ifset $flash['success']}
        <div class="ink-alert basic success" role="alert">
          <button class="ink-dismiss">&times;</button>
          <p>{$flash['success']}</p>
        </div>
        {/ifset}
        {ifset $flash['notice']}
        <div class="ink-alert basic info" role="alert">
          <button class="ink-dismiss">&times;</button>
          <p>{$flash['notice']}</p>
        </div>
        {/ifset}
        {block content}
        {/block}
      </div>
      <div class="push"></div>
    </div>
    <footer class="clearfix">
      <div class="align-center small half-top-space half-bottom-space">
        {_}powered_by{/_} <a href="https://lemoncms.tuxfamily.org/" target="_blank">LemonCMS</a> version {=CMS_VERSION}
      </div>
    </footer>
    <script src="public/js/ink/ink-all.js"></script>
    <script src="public/js/ink/autoload.js"></script>
  </body>
</html>
