{% extends "base.html" %}
{% from "components/ui.html" import breadcrumb, csrf_field, filter_bar, folder_options 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 %}<a class="btn" href="/ui/accounts/{{ account.id }}/drafts">Drafts</a>{% endif %}
{% if can.write %}<a class="btn primary" href="/ui/accounts/{{ account.id }}/compose">Write</a>{% endif %}
{% endblock %}
{% block content %}
<div class="mail-layout">
  <div>
    <nav class="card folders" aria-label="Folders">
      <header><h2>Folders</h2></header>
      <ul>
        {% for folder, depth in tree %}
        <li class="depth-{{ [depth, 4] | min }}">
          <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>
        </li>
        {% endfor %}
      </ul>
      {% if can.create_folder %}
      <form class="body" 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">New folder</label>
          <input id="f-new-folder" name="name" value="{{ typed.new }}" required />
        </div>
        <label class="check"><input type="checkbox" name="parent" value="{{ current.id }}"{% if typed.inside %} checked{% endif %} /> inside {{ current.name }}</label>
        <div class="form-actions"><button class="small" type="submit">Create</button></div>
      </form>
      {% endif %}
    </nav>

    {% if current.role is none and (can.update_folder or can.delete_folder) %}
    <section class="card">
      <header><h2>This folder</h2></header>
      <div class="body">
        {% if can.update_folder %}
        <form method="post" action="/ui/accounts/{{ account.id }}/folders/rename">
          {{ csrf_field() }}
          <input type="hidden" name="folder" value="{{ current.id }}" />
          <div class="field">
            <label for="f-rename">Name</label>
            <input id="f-rename" name="name" value="{{ typed.name if typed.name is not none else current.name }}" required />
          </div>
          <div class="form-actions"><button class="small" type="submit">Rename</button></div>
        </form>
        <form method="post" action="/ui/accounts/{{ account.id }}/folders/move">
          {{ csrf_field() }}
          <input type="hidden" name="folder" value="{{ current.id }}" />
          <div class="field">
            <label for="f-parent">Inside</label>
            <select id="f-parent" name="parent">
              <option value="">the top</option>
              {{ folder_options(tree, [current.id], selected=typed.parent if typed.moving else current.parent_id) }}
            </select>
          </div>
          <div class="form-actions"><button class="small" type="submit">Move</button></div>
        </form>
        {% endif %}
        {% if can.delete_folder %}
        <form method="post" action="/ui/accounts/{{ account.id }}/folders/delete" data-confirm="Delete the folder {{ current.name }}? Only an empty folder without subfolders can be deleted.">
          {{ csrf_field() }}
          <input type="hidden" name="folder" value="{{ current.id }}" />
          <div class="form-actions"><button class="small danger" type="submit">Delete folder</button></div>
        </form>
        {% endif %}
      </div>
    </section>
    {% endif %}
  </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">
        <option value="">(folder, for move)</option>
        {{ folder_options(tree, [current.id]) }}
      </select>
      {% endif %}
      <button type="submit">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.">Delete for good</button>{% endif %}
    </form>
    {% endif %}
    <div class="body tight">{% include "partials/message_list.html" %}</div>
  </section>
</div>
{% endblock %}