<!DOCTYPE html>
<html>

  <head>
    <title>Maraschino Mobile Library Browser</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" sizes="64x64" type="image/x-icon">
    <link rel="apple-touch-icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">

    <!-- CSS -->
    <script>var LESS_WEBROOT = "{{ webroot_url('/static')[1:] }}";</script>
    <link rel="stylesheet/less" href="{{ url_for('static', filename='less/mobile/mobile.less') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='less/mobile/lib/jquery.mobile.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='less/mobile/lib/jquery.mobile.simpledialog.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='less/mobile/lib/jquery.swipeButton.css') }}">

    <!-- JS frameworks -->
    <script src="{{ url_for('static', filename='js/lib/less.js') }}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/lib/jquery.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lib/jquery.mobile.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lib/jquery.mobile.simpledialog2.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lib/jquery.swipeButton.js') }}"></script>

    <script>
      function destroyLessCache(pathToCss) {
        if (!window.localStorage || !less) {
          return;
        }
        var host = window.location.host;
        var protocol = window.location.protocol;
        var keyPrefix = protocol + '//' + host + pathToCss;
        for (var key in window.localStorage) {
          if (key.indexOf(keyPrefix) === 0) {
            delete window.localStorage[key];
          }
        }
      }
      destroyLessCache("{{ url_for('static', filename='less/') }}");
    </script>
  </head>

  <body>

    <div data-role="page" data-add-back-btn="true">

      <div id="site_header" data-role="header" data-position="fixed">

        {% block left_button %}{% endblock %}

        {% block header %}<h1>Maraschino</h1>{% endblock %}

        <a class="logo" href="{{ url_for('mobile_index') }}" data-direction="reverse" data-transition="slide">
          <img src="{{ url_for('static', filename='images/mobile/maraschino_logo.png') }}" alt="Maraschino logo">
        </a>

        {% block navbar %}{% endblock %}

      </div>

      <div data-role="content">
        {% block content %}{% endblock %}
      </div>

    </div>
    <script>var WEBROOT = "{{ webroot_url() }}";</script>
    <script src="{{ url_for('static', filename='js/mobile/mobile.js') }}"></script>

  </body>

</html>
