{% extends "base.html" %}
{% from "components/ui.html" import action, breadcrumb, csrf_field, filter_bar, folder_options, icon, link_button, toggle with context %}
{% block title %}{{ current.name }} · {{ account.email }} · {{ APP_NAME }}{% endblock %}
{% block heading %}{{ current.name }}{% endblock %}
{% block subheading %}{{ breadcrumb(trail) }}{% endblock %}
{% block actions %}
{% if can.drafts %}{{ link_button("/ui/accounts/" ~ account.id ~ "/drafts", "Drafts", "pencil", cls="") }}{% endif %}
{% if can.write %}{{ link_button("/ui/accounts/" ~ account.id ~ "/compose", "Write", "pencil", cls="primary") }}{% endif %}
{% endblock %}
{% block content %}
<div class="mail-layout">
  <div>
    <nav class="card folders" aria-label="Folders">
      <header><h2>Folders</h2>{% if can.create_folder %}<span class="right">{{ toggle("new-folder", "New folder", "plus-lg", alone=False, open=typed.adding) }}</span>{% endif %}</header>
      {% if can.create_folder %}
      <div class="row-form{{ ' open' if typed.adding }}" id="new-folder">
        <form method="post" action="/ui/accounts/{{ account.id }}/folders">
          {{ csrf_field() }}
          <input type="hidden" name="shown" value="{{ current.id }}" />
          <div class="field">
            <label for="f-new-folder">Name</label>
            <input id="f-new-folder" name="name" value="{{ typed.new }}" required />
          </div>
          <div class="field">
            <label for="f-new-parent">Inside</label>
            <select id="f-new-parent" name="parent">
              <option value="">the top</option>
              {{ folder_options(tree, [], selected=typed.new_parent) }}
            </select>
          </div>
          <div class="form-actions"><button class="small primary" type="submit">{{ icon("check-lg") }} Create</button><button class="small" type="button" data-close>Cancel</button></div>
        </form>
      </div>
      {% endif %}
      {% set changeable = current.role is none and (can.update_folder or can.delete_folder) %}
      <ul>
        {% for folder, depth in tree %}
        <li class="depth-{{ [depth, 4] | min }}">
          <div class="folder-line">
            <a href="?{{ [('folder', folder.id)] | urlencode }}" class="{{ 'active' if folder.id == current.id }}">
              <span class="grow">{{ folder.name }}</span>
              {% if folder.unread %}<span class="count">{{ folder.unread }}</span>{% endif %}
            </a>
            {% if folder.id == current.id and changeable %}
            <span class="folder-actions">
              {% if can.update_folder %}{{ toggle("change-folder", "Rename or move", "pencil", name="Rename or move " ~ folder.name, open=typed.changing) }}{% endif %}
              {% if can.delete_folder %}{{ action("/ui/accounts/" ~ account.id ~ "/folders/delete", "Delete", confirm="Delete the folder " ~ folder.name ~ "? Only an empty folder without subfolders can be deleted. This cannot be undone.", cls="small danger", fields={"folder": folder.id}, icon="trash", alone=True, name="Delete " ~ folder.name) }}{% endif %}
            </span>
            {% endif %}
          </div>
          {% if folder.id == current.id and changeable and can.update_folder %}
          <div class="row-form{{ ' open' if typed.changing }}" id="change-folder">
            <form method="post" action="/ui/accounts/{{ account.id }}/folders/change" data-confirm-when="moved" data-confirm="Move the folder {{ folder.name }}? It moves with the folders inside it. Its messages stay where they are." data-confirm-label="Move">
              {{ csrf_field() }}
              <input type="hidden" name="folder" value="{{ folder.id }}" />
              <input type="hidden" name="was_name" value="{{ folder.name }}" />
              <input type="hidden" name="was_parent" value="{{ folder.parent_id or '' }}" />
              <div class="field">
                <label for="f-folder-name">Name</label>
                <input id="f-folder-name" name="name" value="{{ typed.name if typed.name is not none else folder.name }}" required />
              </div>
              <div class="field">
                <label for="f-folder-parent">Inside</label>
                <select id="f-folder-parent" name="parent" data-was="{{ folder.parent_id or '' }}">
                  <option value="">the top</option>
                  {{ folder_options(tree, [folder.id], selected=typed.parent if typed.changing else folder.parent_id) }}
                </select>
              </div>
              <span class="hint">A new name renames the folders inside it too. Another place moves it, after a question.</span>
              <div class="form-actions"><button class="small primary" type="submit">{{ icon("check-lg") }} Save</button><button class="small" type="button" data-close>Cancel</button></div>
            </form>
          </div>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    </nav>
  </div>

  <section class="card">
    {% if can.search %}<div class="body">{{ filter_bar(bar, problem) }}</div>{% endif %}
    {% if selectable and messages %}
    <form id="batch" class="body toolbar" method="post" action="/ui/accounts/{{ account.id }}/mail/batch">
      {{ csrf_field() }}
      <input type="hidden" name="back" value="{{ here }}" />
      <label for="f-batch-action">Ticked messages</label>
      <select id="f-batch-action" name="action">
        {% if can.flag %}
        <option value="read">mark read</option>
        <option value="unread">mark unread</option>
        <option value="star">star</option>
        <option value="unstar">unstar</option>
        {% endif %}
        {% if can.move %}<option value="move">move to …</option>{% endif %}
        {% if can.trash and current.role != "trash" %}<option value="trash">move to the trash</option>{% endif %}
      </select>
      {% if can.move %}
      <select name="folder" aria-label="Folder to move to" data-show-for="f-batch-action:move">
        <option value="">choose a folder</option>
        {{ folder_options(tree, [current.id]) }}
      </select>
      {% endif %}
      <button type="submit">{{ icon("check-lg") }} Apply</button>
      {% if can.purge %}<button class="danger" type="submit" name="purge" value="1" data-confirm="Delete the ticked messages for good? This cannot be undone." data-confirm-label="Delete for good" data-confirm-danger>{{ icon("x-octagon") }} Delete for good</button>{% endif %}
    </form>
    {% endif %}
    <div class="body tight">{% include "partials/message_list.html" %}</div>
  </section>
</div>
{% endblock %}