<!DOCTYPE html>
<!--
    Copyright (c) 2012-2014 Adobe Systems Incorporated. All rights reserved.

    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<!-- Cache manifest only works on same domain :(-->
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta http-Equiv="Cache-Control" Content="no-cache" />
        <meta http-Equiv="Pragma" Content="no-cache" />
        <meta http-Equiv="Expires" Content="0" />
        <!-- Enable all requests, inline styles, and eval() -->
        <!--meta http-equiv="Content-Security-Policy" content="default-src *;
        style-src * 'unsafe-inline'; script-src * 'unsafe-inline'
        'unsafe-eval'"-->
        <meta http-equiv="Content-Security-Policy" content="default-src *;
        style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'
        'unsafe-eval'">

        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title class="momo-title">Chargement...</title>
    </head>
    <body>

        <div id="momo-templates"></div>

        <div id="momo-main">
            <div class="momo-loading text-muted">
                <i class="fa fa-spinner fa-pulse fa-3x"></i>
                <p class="momo-loading-text">
                  Initialisation de l'application
                </p>
            </div>
        </div>

        <script type="text/x-tmpl" id="momo-first-launch-tmpl">
            <div class="text-center text-muted">
                <h1 class="page-header">Première utilisation</h1>
                <img src="icon.png" width="128" height="128" class="bottom-20"/>
                <div class="well">
                    Tirez vers le bas pour mettre à jour l'application
                </div>
            </div>
        </script>

        <script type="text/x-tmpl" id="momo-default-footer-tmpl">
          <div class="col-xs-6 navbar-btn text-left">
              <a href="https://dev.entrouvert.org/projects/momo/"
                  class="btn btn-success pull-left momo-repo"
                  target="_system"
                  onclick="javascript:app.utils.onExternalLinkClick()">Momo repository</a>
          </div>
          <div class="col-xs-6 navbar-btn text-right">
              <a href="mailto:{%= o.meta.contact %}"
                  class="btn btn-success pull-right momo-contact">{%= o.meta.contact %}</a>
          </div>
        </script>

        <script type="text/x-tmpl" id="momo-icon-tmpl">
            {% if(o.icon){ %}
                {% if(o.icon.isFramable()){ %}
                    <img src="{%= o.icon %}" height="{%= o.size %}" width="{%= o.size %}" />
                {% } else { %}
                    <i class="fa fa-fw {%= o.icon %} {% if(o.size > 20){ %} fa-3x {% } %}"></i>
                {% } %}
            {% } %}
        </script>

        <script type="text/x-tmpl" id="momo-header-tmpl">
            <div class="parent-navbar-brand">
                <div class="navbar-btn">
                    {% if(o.id && o.id != 'home'){ %}
                        <a href="#" class="btn btn-default pull-left momo-back-btn" onclick="window.history.back(); return false;">
                            <span class="sr-only"> History back </span>
                            <i class="fa fa-chevron-left"></i>
                        </a>
                    {% } %}
                </div>
                <span class="navbar-brand" href="#home">
                    {% if(!(o.titlePersistent || o.meta.titlePersistent || o.id == 'home')){ %}
                        {%# (o.titleSeparator || o.meta.titleSeparator) %}
                    {% } %}
                    <span class="momo-icon">
                        {% var icon = (o.titlePersistent || o.meta.titlePersistent || o.id == 'home') ? o.meta.icon : o.icon || o.meta.icon; %}
                        {% if(icon){ %}
                            {%# tmpl('momo-icon-tmpl', { icon: icon, size: 20, header: true }) %}
                        {% } %}
                    </span>
                    <span class="momo-title">
                        {% if(o.titlePersistent || o.meta.titlePersistent || o.id == 'home'){ %}
                            {%= o.meta.title %}
                            {%# (o.titleSeparator || o.meta.titleSeparator) %}
                            <small>
                                {% if(o.meta.icon && o.icon){ %}
                                  {%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20, header: true }) %}
                                {% } %}
                                {%# o.title %}
                            </small>
                        {% } else { %}
                            {%# (o.title || o.meta.title) %}
                        {% } %}
                    </span>
                </span>
            </div>
        </script>

        <!-- Main Template -->
        <script type="text/x-tmpl" id="momo-main-tmpl">

            <!-- Pull to refresh container -->
            <div id="ptr">
                <span class="genericon genericon-next"></span>

                <div class="loading">
                    <span class="l" id="l1"></span>
                    <span class="l" id="l2"></span>
                    <span class="l" id="l3"></span>
                    <span class="momo-loading-text"></span>
                </div>
            </div>

            <!-- Navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
              <div class="container-fluid">
                <div class="navbar-header momo-header">
                  <div class="navbar-btn nav-toggle pull-right">
                      <button id="momo-menu-toggle" type="button" class="btn btn-default pull-right nav-toggle">
                          <i class="fa fa-bars fa-lg"></i>
                      </button>
                  </div>
                  <div class="navbar-header" id="momo-header">
                      {%# tmpl('momo-header-tmpl', o) %}
                  </div>
                </div>
                <div class="momo-nav-collapse">
                  <form id="momo-search" class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                      <div class="input-group">
                        <input id="momo-search-input" name="searchInput" type="text" class="form-control" placeholder="Rechercher">
                        <div class="input-group-btn">
                          <button type="submit" class="btn btn-success">
                            <i class="fa fa-search"></i>
                            <!--span class="visible-xs-inline">Rechercher</span-->
                          </button>
                        </div>
                      </div>
                    </div>
                  </form>
                  <ul id="momo-menu" class="nav navbar-nav navbar-right"></ul>
                </div>
              </div>
            </nav>

            <!-- Pages List -->
            <div id="momo-pages"></div>

        </script>

        <script type="text/x-tmpl" id="momo-list-item-tmpl">
            <a href="#{%= o.id %}" class="{% if(!o.header){ %} list-group-item {% } %} clearfix {%= o.external ? 'offline-disable' : '' %}">
                {% if(o.header){ %}
                    <span class="pull-left">
                        {% if(o.icon){ %}
                            {%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
                            <span class="hidden-sm hidden-md">
                                {%# o.title %}
                            </span>
                        {% } else { %}
                            {%# o.title %}
                        {% } %}
                    </span>
                    {% if(o.external) { %}
                        <i class="fa fa-external-link pull-right hidden-sm hidden-md"></i>
                    {% } else { %}
                        <i class="fa fa-angle-right pull-right visible-xs-inline"></i>
                    {% } %}
                {% } else { %}
                        {% if(o.external) { %}
                            <i class="fa fa-external-link pull-right"></i>
                        {% } else { %}
                            <i class="fa fa-angle-right pull-right"></i>
                        {% } %}
                    {% if(o.description){ %}
                        <h5 class="list-group-item-heading">
                            {% if(o.icon){ %}
                                {%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
                            {% } %}
                            {%# o.title %}
                        </h5>
                        <p class="list-group-item-text">
                            {%# o.description %}
                        </p>
                    {% } else { %}
                        <h5 class="pull-left bottom-0 top-0">
                            {% if(o.icon){ %}
                                {%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
                            {% } %}
                            {%# o.title %}
                        </h5>
                    {% } %}
                {% } %}
            </a>
        </script>

        <script type="text/x-tmpl" id="momo-icon-item-tmpl">
            <div class="col-xs-{%= o.colxs %} col-sm-{%= o.colsm %} col-md-{%= o.colmd %} col-lg-{%= o.collg %}">
                <a href="#{%= o.id %}" class="btn btn-block text-center {%= o.className || 'btn-default' %} {%= o.external ? 'offline-disable' : '' %}">
                    {% if(o.external){ %}
                        <i class="fa fa-external-link top-right"></i>
                    {% } %}
                    {% if(o.icon){ %}
                        <div style="height: 42px;">
                            {%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 42 }) %}
                        </div>
                    {% } %}
                    {%# o.title %}
                </a>
            </div>
        </script>

        <!-- Flash message template -->
        <script type="text/x-tmpl" id="momo-flash-message-tmpl">
            <div class="alert alert-{%= o.type %} pt-page-rotateRoomBottomIn">
                <a href="#momo-blank" onclick="app.utils.removeElement(this.parentElement);" class="pull-right">&times;</a>
                {% if(o.type == "success"){ %}<i class="fa fa-fw fa-check"></i>
                {% } else if(o.type == "info"){ %}<i class="fa fa-fw fa-info-circle"></i>
                {% } else if(o.type == "warning"){ %}<i class="fa fa-fw fa-exclamation-triangle"></i>
                {% } else if(o.type == "danger"){ %}<i class="fa fa-fw fa-exclamation-circle"></i>{% } %}
                {%# o.message %}
                <div class="clearfix"></div>
            </div>
        </script>

        <!-- Update availbable template -->
        <script type="text/x-tmpl" id="momo-update-available-tmpl">
            <a href="#momo-update" class="btn btn-success pull-right">
               <i class="fa fa-download"></i>
               Mettre à jour
            </a>
            <strong>Mise à jour disponible !</strong>
            <p>
               {%= o.mtime %}
            </p>
            <div class="clearfix"></div>
        </script>

        <!-- Offline template -->
        <script type="text/x-tmpl" id="momo-offline-tmpl">
            <div class="alert alert-warning">
                <i class="fa fa-warning"></i>
                Application hors-ligne
            </div>
        </script>

        <!-- Page template -->
        <script type="text/x-tmpl" id="momo-page-tmpl">
            {% var displayFooter = true; %}

            <div class="{% if(o.url){ %}{% } else { %}momo-page-wrapper{% } %} clearfix">

                {% if(o.url && !o.url.isImage()){ %}
                    <div class="momo-frame-spinner offline-hidden">
                      <div class="momo-loading text-muted">
                          <i class="fa fa-spinner fa-pulse fa-3x"></i>
                          <p class="momo-loading-text">
                            Chargement du contenu
                          </p>
                      </div>
                    </div>
                {% } %}

                {% if(!(o.url && o.url.isImage())){ %}
                    <div class="offline-visible">
                        {%# tmpl('momo-offline-tmpl', o) %}
                    </div>
                    <div class="momo-flash-messages"></div>
                    <div class="container-fluid">
                        <section class="momo-page-content">{%# o.content %}</section>
                    </div>
                {% } else { %}
                    <div class="momo-image-viewer" style="background-image: url('{%# o.url %}');">
                        <div class="offline-visible hidden">
                            {%# tmpl('momo-offline-tmpl', o) %}
                        </div>
                        <div class="momo-flash-messages"></div>
                        <div class="container-fluid momo-page-content-parent">
                            <section class="momo-page-content">{%# o.content %}</section>
                        </div>
                        {% if(o.next){ %}
                            <a class="momo-next" href="#momo-forward"><i class="fa fa-fw fa-lg fa-chevron-right"></i></a>
                        {% } %}
                        {% if(o.prev){ %}
                            <a class="momo-previous" href="#momo-back"><i class="fa fa-fw fa-lg fa-chevron-left"></i></a>
                        {% } %}
                    </div>
                    {% displayFooter = false; %}
                {% } %}
                       
                {% if(o.url && !o.url.isImage()){ %}
                    <iframe src="{%= o.url %}" class="momo-iframe"></iframe>
                {% } %}
       
                {% if(o.pages){ %}
                    {% if(o.display == 'icons'){ %}
                        <div class="container-fluid tiny-gutters momo-page-pages">
                            {% for (var i = 0; i < o.pages.length; i++) { %}
                                {%# tmpl("momo-icon-item-tmpl", app.pages[o.pages[i]]) %}
                            {% } %}
                        </div>
                    {% } else { %}
                        <div class="list-group momo-page-pages">
                            {% for (var i = 0; i < o.pages.length; i++) { %}
                                {%# tmpl("momo-list-item-tmpl", app.pages[o.pages[i]]) %}
                            {% } %}
                        </div>

                    {% } %}
                {% } %}

                {% if(o.seealso){ %}
                    <div class="container-fluid">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                Voir aussi
                            </div>
                            <div class="list-group momo-page-pages">
                                {% for (var i = 0; i < o.seealso.length; i++) { %}
                                    {%# tmpl("momo-list-item-tmpl", app.pages[o.seealso[i]]) %}
                                {% } %}
                            </div>
                        </div>
                    </div>
                {% } %}

            </div>
  
            {% if(displayFooter){ %}
                <!-- Footer -->
                <footer class="navbar navbar-inverse momo-footer">
                    <div class="container-fluid clearfix">
                        <div class="row">
                            {%# o.footer %}
                        </div>
                    </div>
                </footer>
            {% } %}


        </script>

        <script type="text/javascript" src="cordova.js"></script>
        <!--script type="text/javascript" src="js/jquery-1.11.3.min.js"></script-->
        <!--script type="text/javascript" src="js/createTouchEvent.js"></script-->
        <script type="text/javascript" src="js/polyfill/Promise.min.js"></script>
        <script type="text/javascript" src="js/polyfill/transition-end.min.js"></script>
        <script type="text/javascript" src="js/tmpl.min.js"></script>
        <script type="text/javascript" src="js/lunr.min.js"></script>
        <script type="text/javascript" src="js/lunr.stemmer.support.min.js"></script>
        <script type="text/javascript" src="js/lunr.fr.min.js"></script>
        <script type="text/javascript" src="js/hammer.min.js"></script>
        <script type="text/javascript" src="js/wptr.js"></script>
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/responsive-nav.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>
