{% extends "layouts/" + render_mode + ".html" %}
{% block title %}{{_("Contacts")}}{% endblock %}
{% block contenttools %}
<div id="content-tools">
  {% include("partials/tools_contacts.html") %}
</div>
{% endblock %}
{% block content %}
  <h2>
    IMPORTANT: This page is unfinished. Please don't be surprised by bugs.
  </h2>
  {% if result.contacts %}
  <div id="contacts-list" class="container rectangles-container center">
    <div class="clearfix"></div>
    {% for contact in result.contacts %}
    {% if contact.email %}
    <div class="rectangles-outer" id="contact-card-{{contact.email.0.email}}">
      <div class="rectangles-inner">
        <a class="contact-card-avatar left"
{%- if is_dev_version() %}
           href="{{ U('/contacts/view/', contact.email.0.email, '/') }}"
{%- endif %}
           >
          {% if contact.photo %}
          <img src="{{ U(contact.photo.0.photo) }}">
          {% elif contact.email %}
          <img src="{{ U('/static/img/avatar-default.png') }}">
          {% endif %}
        </a>
        <a class="contact-card-name"
{%- if is_dev_version() %}
           href="{{ U('/contacts/view/', contact.email.0.email, '/') }}"
{%- endif %}
           >
          {% if contact.fn|length > 24 %}
          {{contact.fn[:24]}}
          {% else %}
          {{contact.fn}}
          {% endif %}
        </a>
        <input type="checkbox" class="contact-card-checkbox right">
      </div>
    </div>
    {% else %}
    {{_("No Contact Info")}}
    {% endif %}
    {% endfor %}
  </div>
  {% else %}
  <div class="add-top text-center">
    <h3>{{_("No Contacts Found")}} :)</h3>
    <p>{{_("Don't worry, it's ok. Mailpile will start to automatically create contacts whenever you send or reply to messages.")}}</p>
    <!-- <button><span class="icon-upload"></span> Import Contacts</button> -->
  </div>
  {% endif %}

<div id="pile-bottom">
  {% if result.offset > 0 %}
  <a href="{{ U('/contacts/?offset=', result.offset-result.count, '&count=', result.count) }}" class="button-primary">{{_("Previous")}}</a>
  {% endif %}
  {% if result.offset + result.count < result.total %}
  <a href="{{ U('/contacts/?offset=', result.offset+result.count, '&count=', result.count) }}" class="button-primary">{{_("Next")}}</a>
  {% endif %}
  <h5>{% if result.total > 1 %}{{result.start}} - {{result.end}} {{_("of")}} {{result.total}} {{_("Contacts")}} {% elif result.total == 1 %} {{_("1 Conversation")}} {% else %} {{_("No results found")}} {% endif %}</h5>
</div>

<script>
$(document).ready(function() {
  Mailpile.Contacts.init();
});
</script>
{% endblock %}

