{% extends "layout/base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block content %}
<div class="section-definer-grey">
  <div class="container-fluid nav-bar-boxes-">
    <div class="boxes-navbar-container">
      <div class="head-navbar row middle-xs">
        <div class="col-xs-8 col-sm-5 start-xs">
          <h2 class="text-lightest title">{% trans "MANAGE BOXES" %}</h2>
        </div>
        <div class="col-xs-4 col-sm-1">
          <a class="box__nav box__nav__item smalltext md-trigger outro new-box-btn" {% if request.user.has_setup_complete %} data-modal="modal-1" {% else %} href="{% url 'humans_update' %}?setup=1" {% endif %}>{% trans "New Box" %}</a>
        </div>
      </div>
      <ul class="box__nav smalltext">
        <div class="row no-padding">
          <div class="center-xs col-xs-12 flex-d">
            <li class="full-width"><a href="{% url "boxes_list" %}?display=Open" class="box__nav__item {% if display_status == 'Open' %}active{% endif %}">{% trans "Open" %}</a></li>
            <li class="full-width" ><a href="{% url "boxes_list" %}?display=Done"class="box__nav__item {% if display_status == 'Done' %}active{% endif %}">{% trans "Done" %}</a></li>
            <li class="full-width"><a href="{% url "boxes_list" %}?display=Expired" class="box__nav__item {% if display_status == 'Expired' %}active{% endif %}">{% trans "Expired" %}</a></li>
            <li class="full-width" ><a href="{% url "boxes_list" %}?display=Closed" class="box__nav__item {% if display_status == 'Closed' %}active{% endif %}">{% trans "Closed" %}</a></li>
          </div>
        </div>
      </ul>
    </div>
  </div>
  <div class="h-section section-resized">
    <div class="row boxes-container">
      {% for box in object_list %}
      <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-6 col-lg-4 space">
        <div class="box {% if box.uuid|lower == new_box %}new-box{% endif %}">
          <div class="box-content">
            <div class="box-container">
              <div class="basic-info">
                <div class="box-title-desc">
                  <p class="xmb-small textbold text-darkest">{{box.name}}</p>
                  <p class="xmb-small smalltext text-darkest">{{box.description}}</p>
                </div>
              </div>
            </div>
            {% if box.status == allow_actions %}
            <div class="link-barra">
              <input class="barra xsmalltext" type="text" value="https://{{domain}}{% url "boxes_show" box.uuid %}" id="box-{{box.id}}-url" />
              <button data-src='box-{{box.id}}-url' class="btn-blue copy-to-clipboard-js copy-link"><img src="{% static 'images/external.png' %}" class="img-boxes-external"></button>
            </div>
            {% endif %}

            <div class="extra-info">
              <p class="no-margin-bottom mt-small">
                <span class="xsmallmedium text-darkest">{% trans "Messages:" %}</span>
                <span class="xsmalltext text-darkest">{{box.messages.count}}/{{box.max_messages}}</span>
              </p>
              <p class="mt-small mb-small">
                <span class="xsmallmedium">{% trans "Created on:" %}</span>
                <span class="xsmalltext tex">{{box.created_at}}</span>
              </p>
              {% if box.expires_at %}
              <p class="no-margin-top mb-small">
                <span class="xsmallmedium">{% trans "Expires on:" %}</span>
                <span class="xsmalltext">{{box.expires_at}}</span>
              </p>
              {% endif %}
              {% if box.messages.count %}
              <p class="smalltext no-margin-top">
                <span class="xsmallmedium">{% trans "Last sent:" %}</span>
                <span class="xsmalltext">{{box.last_sent_at}}</span>
              </p>
              {% endif %}
            </div>
            {% if box.status == allow_actions %}
            <div class="row url_btn">
              <form class="col-xs-6 center-xs icon-text box-options" action="{% url 'boxes_close' box.id %}" method="post">
                {% csrf_token %}
                <img src="{% static 'images/close.png' %}" class="img-boxes">
                <input class="xsmalltext icons-blue" type="submit" value="{% trans "CLOSE" %}"/>
              </form>
              <form class="col-xs-6 center-xs icon-text box-options" action="{% url 'boxes_delete' box.id %}" method="post">
                {% csrf_token %}
                <img src="{% static 'images/paper-bin.png' %}" class="img-boxes">
                <input class="xsmalltext icons-" type="submit" value="{% trans "DELETE" %}"/>
              </form>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      {% empty %}
        {% if display_status == 'Open' %}
          <div>
            <h1 class="text-darkest">{% trans "You don't have any boxes yet" %}</h1>
            <p class="text-darkest">{% trans "A Box is a generated link where other people can submit information that will be encrypted and delivered to you. They can have several different settings." %}</p>
            <p class="text-darkest">{% trans "If you already have configured your public key in the settings menu, you just need to click the ''New Box'' button above to start using Hawkpost. If not please add your public key first." %}</p>
          </div>
        {% endif %}
      {% endfor %}
    </div>
    <div class="row">
      <div class="col-xs-offset-3 col-xs-6 center-xs">
        <div class="pagination text">
          <span class="step-links">
            {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}&amp;display={{ display_status }}" class=" text-darkest"> &lt; {% trans "Previous" %}</a>
            {% endif %}
            {% if paginator.num_pages > 1 %}
            <span class="current hidden">
              {% blocktrans %}Page {{ page_obj.number }} of {{ paginator.num_pages }}{% endblocktrans %}
            </span>
            {% endif %}
            {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}&amp;display={{ display_status }}" class="text-darkest">{% trans "Next" %} &gt; </a>
            {% endif %}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="md-modal-xs md-effect-1" id="modal-1">
  <div class="md-content-xs">
    <button type="button" class="md-close btn-none"><i class="fa fa-times fa-lg" aria-hidden="true"></i></button>
    <div class="row center-xs center-md center-lg">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <h3 class="subtitle center-xs text-lightest">{% trans "CREATE NEW BOX" %}</h3>
        <p class="smalltext text-lightest text-mob-">{% blocktrans %}For others to be able to send you encrypted content through Hawkpost, you'll need to generate "boxes".{% endblocktrans %}</p>
        <p class="smalltext text-lightest">{% trans "Each box has an associated link that you can copy and share with any given person. If you want, you can set the expiration date and number of messages after which the link will be locked and no longer accessible." %}</p>
        <span id="__all__-errors-js"></span>
        <form action="{% url 'boxes_create' %}" method="post" class="" id="box-create-form-js">
          {% csrf_token %}
          <label class="input-anim smalltext">
            <p>
              <span id="name-errors-js">{{ form.name.errors }}</span>
              {{ form.name.label_tag }}
              {{ form.name }}
            </p>
            <div class="row middle-xs">
              <div class="col-xs-9 col-xxs-12 col-sm-8">
                <p>
                  <span id="description-errors-js">{{ form.description.errors }}</span>
                  {{ form.description.label_tag }}
                  {{ form.description }}
                </p>
              </div>
              <div class="col-xs-3 col-xxs-12 col-sm-4">
                <p>
                  <span id="max_messages-errors-js">{{ form.max_messages.errors }}</span>
                  {{ form.max_messages.label_tag }}
                  {{ form.max_messages }}
                </p>
              </div>
            </div>
            <div class="row bottom-xs padding-b-m">
              <div class="col-xs-9 col-xxs-12 col-sm-8">
                <p>
                  <span id="expires_at-errors-js">{{ form.expires_at.errors }}</span>
                  {{ form.expires_at.label_tag }}
                  {{ form.expires_at }}
                </p>
              </div>
              <div class="col-xs-3 col-xxs-12 col-sm-4">
                <div class="start-xs middle-xs">
                  <p><span id="never_expires-errors-js">{{ form.never_expires.errors }}</span>{{ form.never_expires.label_tag }}</p>
                  {{ form.never_expires }}
                </div>
              </div>
            </div>
          </label>
          <div class="col-xs-12 no-padding">
            <button type="submit" class="btn-blue" value="">{% trans "Create" %}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="md-overlay"></div>
{% endblock content %}

{% block scripts %}
{{ block.super }}
<script src="{% static 'javascripts/box_list.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/jquery.datetimepicker.min.js' %}"></script>
<script src="{% static 'javascripts/box_create.js' %}"></script>
{% endblock scripts %}