{% extends "base.html" %}
{% load static %}

{% block additionnal_css %}
  <link rel="stylesheet" href="{% static "css/envelops.css" %}?v=">
{% endblock %}

{% block additionnal_scripts %}
{% endblock %}

{% block content %}
{%if must_identify %}
  {% include "common/conn_admin.html" %}
{%endif%}
<div id="envelop_cashing_error" class="alert--danger clearfix custom_alert" onClick="toggle_error_alert()">
    <div style="width: 90%" class="fl txtleft" id="error_alert_txt"></div>
    <div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div>
</div>
<div id="envelop_cashing_success" class="alert--success clearfix custom_alert" onClick="toggle_success_alert()">
  <div style="width: 90%" class="fl txtleft success_alert_content">Enveloppe encaissée !</div>
  <div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div>
</div>
<div id="envelop_deletion_success" class="alert--success clearfix custom_alert" onClick="toggle_deleted_alert()">
  <div style="width: 90%" class="fl txtleft">Enveloppe supprimée !</div>
  <div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div>
</div>

<section class="grid-2 has-gutter">
  <section id="cash">
    <h2 class="txtcenter">Enveloppes de liquide</h2>
    <div id="cash_envelops">

    </div>
  </section>

  <section id="ch">
    <h2 class="txtcenter">Enveloppes de chèques</h2>
    <div id="ch_envelops">

    </div>
  </section>
  <section id="archive_cash">
    <hr>
    <h2 class="txtcenter">Enveloppes de liquide archivées</h2>
    <div id="archive_cash_envelops" class="flex-container flex-column-reverse">

    </div>
  </section>
  <section id="archive_ch">
    <hr>
    <h2 class="txtcenter">Enveloppes de chèques archivées</h2>
    <div id="archive_ch_envelops" class="flex-container flex-column-reverse">

    </div>
  </section>
</section>

<div id="templates" style="display:none;">
  <div id="modal_update_envelop">
    <div class="modal_update_envelop_content">
      <h3 class="envelop_name"></h3>
      <div class="envelop_lines"></div>
      <div class="envelop_comments_area">
        <p>Commentaires</p>
        <textarea class="envelop_comments"></textarea>
      </div>
    </div>
  </div>

  <div id="update_envelop_line_template">
    <div class="update_envelop_line">
      <div class="line_partner_name_container">
        <span class="line_number"></span>
        <span class="line_partner_name"></span>
      </div>
      <div class="line_partner_input_container">
        <input type="text" class="line_partner_amount" placeholder="Montant">
        <i class="fas fa-trash-alt fa-lg delete_envelop_line_icon"></i>
      </div>
      <div class="deleted_line_through"></div>
    </div>
  </div>
</div>

<script src="{% static "js/pouchdb.min.js" %}"></script>
<script type="text/javascript">
        {%if must_identify %}
        var must_identify = true
        {%endif%}
        var couchdb_dbname = '{{db}}';
        var couchdb_server = '{{couchdb_server}}' + couchdb_dbname;
        var dbc = new PouchDB(couchdb_dbname);
        var sync = PouchDB.sync(couchdb_dbname, couchdb_server, {
          live: true,
          retry: true,
          auto_compaction: false
        });
</script>
<script src="{% static "js/all_common.js" %}?v="></script>
<script src="{% static "js/envelops.js" %}?v="></script>
{% endblock %}
