{% extends "base.html" %}
<!-- Load internationalisation utils-->
{% load i18n %}
{% load rules %}
{% load sous_chef_extras %}

{% block title %}{% trans "Staff Notes" %}{% endblock %}

{% block content %}
{% has_perm 'sous_chef.edit' request.user as can_edit_data %}

<div class="ui secondary pointing fluid menu">
    <h1 class="ui header">{% trans "Staff Notes" %}</h1>

    <div class="right menu">

    </div>
</div>




<div class="ui padded basic segment">
    {% if can_edit_data %}
    <a href="{% url 'note:note_add' %}" class="ui labeled icon right basic big button">
        <i class="add icon"></i>{% trans 'New note' %}
    </a>
    <div class="ui horizontal divider">
        {% trans 'Or' %}
    </div>
    {% endif %}


    <div class="ui row">
      <form action="" method="get" class="ui form filter-form">

        <div class="inline fields">
          <div class="field">
            <label>{% trans "Name" %}</label>
            <div class="field">
              <div class="ui large left icon input">
                <i class="users icon"></i>
                {{ filter.form.name }}
              </div>
            </div>
          </div>
          <div class="field">
            <label>{% trans "Priority" %}</label>
            <div class="field">
              {{ filter.form.priority|alter_field_class:'ui dropdown' }}
            </div>
          </div>
          <div class="field">
            <label>{% trans "Category" %}</label>
            <div class="field">
              {{ filter.form.category|alter_field_class:'ui dropdown' }}
            </div>
          </div>
      </div>
      <div class="inline fields">
          <div class="field">
            <label>{% trans "Is read" %}</label>
            <div class="field">
              {{ filter.form.is_read|alter_field_class:'ui dropdown' }}
            </div>
          </div>
          <div class="date_range field">
            <label>{% trans 'Date' %}</label>
            (YYYY-MM-DD)
            <div class="date-modified-range-input">{{ filter.form.date_modified }}</div>
          </div>
        </div>
        <div class="field">
          <a href="{{ request.path }}?display={{ display }}" class="ui button">{% trans "Reset" %}</a>
          <button class="ui yellow button" type="submit">{% trans "Search" %}</button>
        </div>
      </form>
    </div>

    <h3>{% trans 'Notes' %}</h3>
    <table class="ui very basic compact table notes-list">
      <tbody>
        {% for note in notes %}
        <tr {% if not note.is_read %}class="warning"{% endif %}>
          <td class="top aligned">
            <div><small>{{note.category|default:""}}</small></div>
            {% if note.priority %}<div><small>[{{note.priority}}]</small></div>{% endif %}
          </td>
          <td>
            <div>
              <a class="header" style="white-space: nowrap; font-weight: 700;" href="{% url 'member:client_information' pk=note.client.id %}">{{note.client}}</a>
              –
              <small class="date-and-author">{{note.date_modified}} {%if note.author %}{% trans 'by' %} {{note.author}}{% endif %}</small>
            </div>
            <div class="description">
              {{ note.note|linebreaksbr }}
            </div>
          </td>
          <td class="action-buttons">
            {% if can_edit_data %}
            <a class="ui basic icon button" href="{% url 'note:edit' pk=note.id %}"><i class="icon edit"></i></a>
            <a class="ui basic icon button note-delete" href="#" data-note-id="{{note.id}}"><i class="icon trash"></i></a>
            {% endif %}
            {% if note.is_read %}
            <button class="ui tiny basic button read-unread-action" data-note-id="{{note.id}}" data-batch-commit-btn="#batch-commit-btn">
              {% trans 'Mark as unread' %}
            </button>
            {% else %}
            <button class="ui tiny basic yellow button read-unread-action" data-note-id="{{note.id}}" data-batch-commit-btn="#batch-commit-btn">
              {% trans 'Mark as read' %}
            </button>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>


    <div class="ui row">
      {% if is_paginated %}
      <div class="ui pagination menu" style="margin: 2em auto">
        {% if page_obj.has_previous %}
        <a class="icon item"
           href="{{ request.path }}{{ get }}page={{ page_obj.previous_page_number }}">
            <i class="left arrow icon"></i>
        </a>
        {% endif %}
        <a class="active item">
          {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
        </a>
        {% if page_obj.has_next %}
        <a class="icon item"
           href="{{ request.path }}{{ get }}page={{ page_obj.next_page_number }}">
            <i class="right arrow icon"></i>
        </a>
        {% endif %}
      </div>
      {% endif %}


      <form action="{% url 'note:batch_toggle' %}" method="post" style="float:right;margin-right:0.5em">
        {% csrf_token %}
        {% for note in notes %}
          {% if not note.is_read %}
          <input type="hidden" name="note" value="{{ note.id }}">
          {% endif %}
        {% endfor %}
        <button class="ui button" style="margin: 2em auto" type="submit">
          {% trans 'Mark all as read' %}
        </button>
      </form>

      <form action="{% url 'note:batch_toggle' %}" method="post" style="float:right;margin-right:0.5em">
        {% csrf_token %}
        <button type="submit" class="ui yellow button" style="margin: 2em auto; display:none" id="batch-commit-btn">{% trans 'Commit selected changes' %}</button>
      </form>
    </div>
</div>

{% for note in notes %}
{% include "note_confirm_delete.html" %}
{% endfor %}

{% endblock %}
