<!DOCTYPE html>
<html>
<head>
    <title>AIRi | {% block title %} {% endblock %}</title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/media/favicon.ico" />
    <link rel="stylesheet" href="/media/css/jquery.mobile-1.0b1.css" />
    <link rel="stylesheet" href="/media/css/jquery.mobile.tabs.css" />
    <link rel="stylesheet" href="/media/css/airi-jquery.mobile.css" />
    {% block extrahead %}{% endblock %}
</head>

{# general use macros #}
{% macro button(href, text, icon='', iconpos='right', class="", theme=None, extra="", enable=True) -%}
  <a href="{{ href }}" 
    class="{{ class }}" 
    data-role="button" 
    data-icon="{{ icon }}" 
    data-iconpos="{{ iconpos }}"
    {% if theme %}
      data-theme="{{ theme }}"
    {% endif %}
    {% if not enable %}
      style="display: none;"
    {% endif %}
    {{ extra }}>{{ text }}</a>
{%- endmacro %}

{# now the scheleton itself #}
<body>
  <div id="loading">
    <h1>AIRi is loading...</h1>
  </div>
  <div data-role="page" id="{% block id %}home{% endblock %}">
    <div data-role="header">
      {{ button (  "#" ,
        "Back", 
        "arrow-l",
        class="ui-btn-left",
        extra='id="back_button"') }}
      <h1>AIRi | {% block header_title %}{% endblock %}</h1>
      {{ button (  "#" ,
        "Main" ,
        "home",
        class="ui-btn-right",
        extra='id="home_button"') }}
      {% block extra_header %}{% endblock %}
    </div>

    <div data-role="content"> {# style="padding-top: 0px;"> #}
      {% block content %}{% endblock %}
    </div>

    <div data-role="header" data-position="inline">
		<h4 style="margin-left: 0px; margin-right: 0px;"
			>Powered by {{ button("http://www.aircable.net","AIRcable.net", 
			"star") }} </h4>
      {{ button ( "#", 
          "Reload", 
          "refresh", 
          class="ui-btn-right",
          extra='id="reload_button"') }}
    </div>
  </div>
  <script type="text/javascript" src="/media/js/jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="/media/js/custom.js"></script>
  <script type="text/javascript" src="/media/js/jquery.mobile-1.0b1.js"></script>
  <script type="text/javascript" src="/media/js/jquery.mobile.tabs.js"></script>
  <script type="text/javascript" src="/media/js/toolbox.flashembed.js"></script>
  <script type="text/javascript" src="/media/js/jQueryRotate-2.1.js"></script>
</body>
</html>

