<!doctype html>
<!--<html lang="es" manifest="manifest.appcache">-->
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Moneylabels</title>
  <meta name="Description" content="@fedegarlo" />
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="css/reset.css"/>
  <link rel="stylesheet" href="css/headers.css"/>
  <link rel="stylesheet" href="css/lists.css"/>
  <link rel="stylesheet" href="css/transitions.css"/>
  <link rel="stylesheet" href="css/toolbars.css"/>
  <link rel="stylesheet" href="css/input_areas.css"/>
  <link rel="stylesheet" href="css/edit_mode.css"/>
  <link rel="stylesheet" href="css/switches.css"/>
  <link rel="stylesheet" href="css/action_menu.css"/>
  <link rel="stylesheet" href="css/drawer.css"/>
  <link rel="stylesheet" href="css/confirm.css"/>
  <link rel="stylesheet" href="css/value_selector.css"/>
  <link rel="stylesheet" href="css/glyphicons.css"/>
  <link rel="stylesheet" href="css/main.css"/>

  <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>

<body role="application" id="topAplicacion">
  <section id="sidebar" data-type="sidebar" class="skin-dark noActivo">
    <header>
      <menu type="toolbar">
        <a href="#content"><span id="botonNueva" class="icon icon-add">add</span></a>
      </menu>
      <h1>Todas las cuentas</h1>
    </header>
    <nav id="lista-cuadernos"></nav>
  </section>
  <section id="drawer" role="region" class="skin-dark activo">
    <header>
      <a id="botonProvisional" href="#"><span class="icon icon-menu">hide sidebar</span></a>
        <menu type="toolbar" class="oculto" data-cuenta-toolbar>
          <button data-edit-cuenta><span class="icon icon-edit">user</span></button>
          <button data-back-to-pg><span class="icon icon-back">user</span></button>
        </menu>
      <h1>moneylabels</h1>
    </header>
    <header id="subheader" class="inactivo">
      <h2 id="subcabecera">Posición Global</h2>
    </header>
    <div id="app-container" role="main">
      <div id="first-page" class="delante">
      </div>
      <div id="cuaderno" class="detras"></div>
    </div>
  </section>
  <div role="toolbar" id="toolbarInferior" class="inactivo">
      <ul>
        <li><button data-apunte="ingreso" class="pack-icon-add">Ingreso</button></li>
      </ul>
      <ul>
        <li><button data-apunte="gasto" class="pack-icon-remove">Gasto</button></li>
      </ul>
    </div>

  <script type="text/html" id="first-page-content">
      <section data-type="list">
        <form>
          <span id="saldoHojaCuaderno" class="saldoHojaCuaderno"></span><br>
          <header data-header-pg>Bienvenido</header>
          <ul id="lista-last-movs"></ul>
        </form>
      </section>
  </script>

<script type="text/html" id="new-movement-template">
  <section id="newMovement">
    <form id="selectorCuentas" class="oculto" role="dialog" data-type="action" onsubmit="return false;">
      <header> Selecciona cuenta </header>
      <menu id="botoneraSelectorCuentas"></menu>
    </form>
    <form id="selectorUbicaciones" class="oculto" role="dialog" data-type="value-selector" onsubmit="return false;">
    <section>
      <header class="foursquare"><img src="IMG/logos/poweredByFoursquare_white.png" style="width: 200px;"/></header>
      <ul role="listbox" id="botoneraSelectorUbicaciones"><li>Habilite la geolocalización</li></ul>
      <menu><button data-cancel-selector-ubicacion type="reset"> Cancelar </button><button data-cancel-selector-ubicacion type="submit"> Aceptar </button></menu>
      </section>
    </form>
    <form id="selectorCategorias" class="oculto" role="dialog" data-type="value-selector" onsubmit="return false;">
    <section>
    <header class="categorias">Selecciona categoría</header>
      <ul role="listbox" id="botoneraSelectorCategorias"></ul>
      <menu><button data-cancel-selector-categoria type="reset"> Cancelar </button><button data-cancel-selector-categoria type="submit"> Aceptar </button></menu>
      </section>
    </form>
    <form role="dialog" data-type="edit">
      <header>
        <button data-cerrar-new-mov><span class="icon icon-close">close</span></button>
        <menu type="toolbar"><button data-aceptar-editor disabled>Hecho</button></menu>
        <h1></h1>
      </header>
      <section class="formulario_app">
        <div data-input-nuevo>
          <p>
            <input data-valor-anterior data-nuevo-apunte-importe type="tel" placeholder="0,00€">
            <button type="reset">Clear</button>
          </p>
        </div>
        <div data-input-nuevo>
          <p>
            <input data-nuevo-apunte-cuenta type="text" placeholder="Selecciona cuenta" readonly="readonly">
          </p>
        </div>
        <div data-input-nuevo>
          <p>
            <input data-nuevo-apunte-ubicacion type="text" placeholder="Selecciona ubicacion" readonly="readonly">
            <button class="geolocalizacion">Clear</button>
          </p>
        </div>
        <div data-input-nuevo>
          <p>
            <input data-nuevo-apunte-categoria type="text" placeholder="Selecciona categoría" readonly="readonly">
          </p>
        </div>
      </section>
    </form>
  </section>
</script>

<script type="text/html" id="new-account-template">
  <section id="newAccount">
    <form id="nuevaCuentaForm" role="dialog" data-type="edit" onsubmit="return false;">
      <header>
        <button data-cerrar-new-account><span class="icon icon-close">close</span></button>
        <menu type="toolbar"><button data-boton-editar="guardar">Hecho</button></menu>
        <h1>Nueva Cuenta</h1>
      </header>
      <section class="formulario_app">
        <div data-input-nuevo>
          <p>
            <input type="text" placeholder="Nombre de la cuenta" data-input-nueva-cuenta="">
            <button type="reset">Clear</button>
          </p>
        </div>
        <div data-input-nuevo>
          <p>
            <input data-input-importe-inicial type="tel" placeholder="0,00€">
            <button type="reset">Clear</button>
          </p>
        </div>
      </section>
      <menu id="menuInferior">
        <button data-cerrar-new-account>Cancelar</button>
        <button data-boton-editar="guardar" disabled="disabled">Guardar</button>
      </menu>
    </form>
  </section>
</script>

<script type="text/html" id="edit-account-template">
  <section id="editAccount">
    <form id="editCuentaForm" role="dialog" data-type="edit" onsubmit="return false;">
      <header>
        <button data-cerrar-edit-account><span class="icon icon-close">close</span></button>
        <menu type="toolbar"><button data-boton-editar="editar">Hecho</button></menu>
        <h1>Editar Cuenta</h1>
      </header>
      <section class="formulario_app">
        <div data-input-nuevo>
           <fieldset>
              <legend>Nombre</legend>
              <section>
                <p>
                  <input data-input-edit-cuenta type="text">
                  <button type="reset">Clear</button>
                </p>
              </section>
          </fieldset>
        </div>
        <div class="checkboxCasero">
          <span>Cuenta principal</span>
          <label>
            <input data-input-principal type="checkbox" name="cuentaPrincipal" data-type="switch">
            <span></span>
          </label>
        </div>
      </section>
      <menu id="menuInferior">
        <button class="danger" data-boton-borrar-cuenta="borrar">Borrar</button>      
        <button data-boton-editar="editar">Guardar</button>
      </menu>
    </form>
  </section>
</script>

  <script type="text/html" id="una-cuenta-template">
  <section data-type="list" id="hojaCuaderno">
    <span class="saldoHojaCuaderno"><%= _.formatSaldo(hoja.saldoTotalCuenta.importe) %><%= hoja.divisa %></span><br>
    <header>Reciente</header>
    <ul id="contenidoHoja">
    </ul>
  </section>
  </script>

  <script type="text/html" id="mensaje-info">
    <form role="dialog" data-type="confirm" id="firstAlert" data-alerts>
      <section>
        <h1>Hola, ¿qué tal?</h1><!--
        <p>
          <img alt="Moneylabels" src="IMG/iconos/icon64.png">
          <strong>Moneylabels</strong>
          <small>@fedegarlo</small>
        </p>-->
        <p><%= mensaje %></p>
      </section>
      <menu>
        <button>Cancelar</button>
        <button data-new-account class="recommend">Nueva cuenta</button>
      </menu>
    </form>
  </script>

    <script type="text/html" id="mensaje-informativo-mov">
    <li class="mensajeInformativo" data-promo="<%= data_promo %>"><a href="#">
      <aside class="cat-icon"><i class="gi-<%= icono %>"></i></aside>
      <p><%= mensaje %></p>
      <p><%= submensaje %></p></a>
    </li>
  </script>

    <script type="text/html" id="confirm-delete-info">
    <form role="dialog" data-type="confirm" id="confirmDelete" data-alerts>
      <section>
        <h1>Borrar cuenta <%= cuenta %></h1>
        <p><%= mensaje %></p>
      </section>
      <menu>
        <button data-cancel-delete >Cancelar</button>
        <button data-confirm-delete class="danger">Confirmar</button>
      </menu>
    </form>
  </script>

<script type="text/html" id="fila-lista-template">
  <ul>
  <li id="botonVolver"><a href="#">Posición Global</a></li>
   <%
        _.each(items,function(item,key,list){
    %>
    <li data-cuenta="<%= item.id %>"><a href="#"><%= item.nombreHoja %></a></li>
      <%
        });
    %>
  </ul>
  </script>

    <script type="text/html" id="boton-cuenta-template">
     <%
          _.each(items,function(item,key,list){
      %>
        <button data-id-boton="<%= item.id %>"><%= item.nombreHoja %></button>
      <%
          });
      %><button data-cancel-selector> Cancelar </button>
  </script>

    <script type="text/html" id="boton-ubicacion-template">
     <%
          _.each(items,function(item,key,list){
      %>
        <li data-id-ubicacion="<%= item.id %>" data-nombre-ubicacion="<%= item.name %>"><span><%= _.truncate(item.name, 30) %></span></li>
      <%
          });
      %>
  </script>

      <script type="text/html" id="boton-categoria-template">
     <%
          _.each(items,function(item,key,list){
      %>
        <li data-id-categoria="<%= item.id %>" data-nombre-categoria="<%= item.name %>"><i class="gi-<%= item.css %> gi-white"></i><span><%= _.capitaliseFirstLetter(item.name) %></span></li>
      <%
          });
      %>
  </script>

      <script type="text/html" id="boton-no-ubicacion-template">
     <%
          _.each(items,function(item,key,list){
      %>
        <li><span><%= _.truncate(item.name, 30) %></span></li>
      <%
          });
      %>
  </script>

  <script type="text/html" id="new-mov-template"> 
    <li data-cuenta="<%= movimiento.idCuenta %>"><a href="#"><span class="importeMovimiento <%
        if (movimiento.tipo === 'I') {
      %><%= 'importePositivo' %><%              
      } else {
       %><%= 'importeNegativo' %><%           
      } %>"><%= movimiento.importe + movimiento.divisa%><span class="fechaMovimiento"><%= _.formatDate(movimiento.fecha) %></span></span>      
        <p class="tipoMovimiento"><%= movimiento.cuenta %> </p>
        <p><%= movimiento.concepto %></p>
      </a>
    </li>
  </script>

<!-- Posicion Global-->
  <script type="text/html" id="fila-movs-template"> 
      <% _.each(items, function(movimiento) {
        %><li data-cuenta="<%= movimiento.idCuenta %>"><a href="#"><span class="importeMovimiento <%
        if (movimiento.tipo === 'I') {
      %><%= 'importePositivo' %><%              
      } else {
       %><%= 'importeNegativo' %><%           
      } %>"><%= movimiento.importe + movimiento.divisa%><span class="fechaMovimiento"><%= _.formatDate(movimiento.fecha) %></span></span><% if (movimiento.categoriaId) { %><aside class="cat-icon"><i class="gi-<%= movimiento.categoriaCss %>"></i></aside><%           
      } %><p class="tipoMovimiento">
      <% _.each(cuentas, function(cuenta) {
          if(cuenta.id === movimiento.idCuenta) {
            %><%= cuenta.nombreHoja %><%
          }
        });
      %>
          </p>
        <p ><% if (movimiento.ubicacion) { %><%= _.truncate(movimiento.ubicacion, 30) %> <% } else { %><%= movimiento.concepto %><% } %></p>
    </a></li>
    <%  }); %>
  </script>

<!-- Subhome-->
    <script type="text/html" id="last-movs-template">
      <% _.each(items, function(movimiento) {
        %><li><span class="importeMovimiento <%
        if (movimiento.tipo === 'I') {
      %><%= 'importePositivo' %><%              
      } else {
       %><%= 'importeNegativo' %><%           
      } %>"><%= movimiento.importe + movimiento.divisa%><span class="fechaMovimiento"><%= _.formatDate(movimiento.fecha) %></span></span>
        <% if (movimiento.categoriaId) { %><aside class="cat-icon"><i class="gi-<%= movimiento.categoriaCss %>"></i></aside><%           
      } %><p class="tipoMovimiento"><% if (movimiento.ubicacion) { %><%= _.truncate(movimiento.ubicacion, 20) %> <% } else { %><%= movimiento.concepto %><% } %></p>
    </li>
    <%  }); %>
  </script>

  <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script src="js/vendor/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/json2.js"></script>
  <script src="js/underscore.js" type="text/javascript"></script>
  <script src="js/backbone.js" type="text/javascript"></script>
  <script src="js/mixins.js"></script>
  <script src="js/app.js"></script>

</body>
</html>