{% extends "layout.html" %}
{% block content_header %}
  {{ build_breadcrumbs([
    { 'name': _('Manage Contacts') , 'link': url_for('.ManagePhonebookView:index'), 'icon': 'users' }
  ]) }}
{% endblock %}
{% block content %}
  <section class="content">
    <div class="form-group">
      <span class="pull-right-container">{{ _("Choose your phonebook: ") }}</span>
      <select id="phonebook" class="input-md select2-single">
        {% for p in phonebook_list %}
          <option value="{{ p.uuid }}"
                  {% if phonebook_uuid==p.uuid %}selected{% endif %}>{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>
    {% call build_list_containers(_('Manage Contacts'), 'users') %}
      {% call build_list_table() %}
        {% call build_list_table_headers(get=url_for('.ManagePhonebookView:get', phonebook_uuid=phonebook_uuid, id=''),
          delete=url_for('.ManagePhonebookView:delete', phonebook_uuid=phonebook_uuid, id='')) %}
          <th>{{ _("Firstname") }}</th>
          <th>{{ _("Lastname") }}</th>
          <th>{{ _("Phone Number") }}</th>
          <th>{{ _("Email") }}</th>
        {% endcall %}
        {% call(contact) build_list_table_rows(resource_list) %}
          <td>{{ contact.firstname }}</td>
          <td>{{ contact.lastname }}</td>
          <td>{{ contact.phone }}</td>
          <td>{{ contact.email or '-' }}</td>
        {% endcall %}
      {% endcall %}
    {% endcall %}
    {% call build_hidden_add_containers(_('Add Contact')) %}
      {% call build_form() %}
        {% call add_default_fields(form=form, submit_value=_('Add')) %}
          {{ render_field(form.phonebook_uuid) }}
          {{ render_field(form.firstname) }}
          {{ render_field(form.lastname) }}
          {{ render_field(form.email) }}
          {{ render_field(form.phone) }}
          {{ render_field(form.mobile_phone) }}
          {{ render_field(form.fax) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}
  </section>
{% endblock %}
{% block additional_js %}<script src="{{ url_for('.static', filename='js/phonebook.js') }}"></script>{% endblock %}
