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

{% block title %}

  {{client}} - {% trans "Information" %}

{% endblock %}

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

<div class="ui segment">
    <h2 class="ui header">
        <div class="content">
            {% trans 'Staff Notes' %}
            <div class="sub header">
                {% trans "Notes added to" %} {{client}}'{% trans "s file" %}.
            </div>
        </div>
    </h2>
    <div class="ui divider"></div>


    <form action="" method="get" class="ui form">

        <div class="inline fields">

            <div class="field">
                <label>{% trans "Priority" %}</label>
                <div class="field">
                    {{ filter.form.priority }}
                </div>
            </div>

            <div class="field">
                <label>{% trans "Is read" %}</label>
                <div class="field">
                    {{ filter.form.is_read }}
                </div>
            </div>

            <input id="id_display" name="display" type="text" value="{{display}}" style="display:none">
        </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>
            {% if can_edit_data %}
            <a href="{% url 'member:client_notes_add' client.pk %}" class="ui button">
              <i class="add icon"></i>{% trans "New Note" %}
            </a>
            {% endif %}
        </div>
    </form>



    <table class="ui very basic compact table">
      <tbody>
        {% for note in notes %}
        <tr {% if not note.is_read %} class="{% if note.priority == 'urgent' %}warning{% else %}warning{% endif %}" {% endif %}>
          <td class="center aligned">
            {% if note.priority == 'urgent' %}
            <i class="warning sign middle aligned icon" title="{% trans 'Urgent' %}"></i>
            {% else %}
            {{note.category}}
            {% endif %}
          </td>
          <td style="width:100%;{% if not note.is_read %}font-weight:bold!important{% endif %}">
            <a class="header">{{note.date}}</a>
            <div class="description">
              {{ note.note }}
            </div>
            <div class="author">
                <small>{% trans 'Created by' %} {{note.author}}</small>
            </div>
          </td>
          <td class="right aligned" style="white-space:nowrap">
            {% if note.is_read %}
            <button class="ui tiny basic button" 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" data-note-id="{{note.id}}" data-batch-commit-btn="#batch-commit-btn">
              {% trans 'Mark as read' %}
            </button>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3">
            <form action="{% url 'note:batch_toggle' %}" method="post" style="float:right">
              {% 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" 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="display:none" id="batch-commit-btn">{% trans 'Commit selected changes' %}</button>
            </form>

          </th>
        </tr>
      </tfoot>
    </table>
</div>

{% endblock %}
