{% extends 'djaken/base.html' %}
{% load i18n static %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "djaken/css/all_notes.css" %}" />{% endblock %}

{% block content %}
    <div class="search_and_new">
        <table class="outer">
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td> 
                                <a class="search_button" id="search_button" title="{% trans 'Search within note' %}" href="{% url 'djaken:all_notes' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{ search_text }}"></a>
                            </td>
                            <td>
                                <form>
                                    <input type="text" id="search_text" name="search" value="{{ search_text }}" maxlength="255" onchange="getSearchText()" onkeypress="return searchKeyPress(event)" />
                                    <input type="hidden" id="sort_order" value="{{sort_order}}" />
                                    <input type="hidden" id="only_relevant" value="{{only_relevant}}" />
                                </form>
                            </td>
                            <td>
                                <a class="erase_button" id="erase_button" title="{% trans 'Clear search criteria' %}"  href="{% url 'djaken:all_notes' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search="></a>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="new_note_button">
                    <a class="new_note_button" title="{% trans 'New note' %}" href="{% url 'djaken:new_note' %}"></a>
                </td>
            </tr>
        </table>
    </div>
    <div class="filters">
        <table class="outer">
            <tr>
                <td>
                    <table class="inner">
                       <tr>
                           <td class="filter_label">
                               <p> {% trans 'Sort by:' %} </p>
                           </td>
                           {% for item in sort_order %}
                               <td>
                                   {% if item == "-relevant" or item == "relevant" %}
                                       <p>{% trans 'Relevant' %}</p>
                                   {% endif %}
                                   {% if item == "-modified" or item == "modified" %}
                                       <p>{% trans 'Modified' %}</p>
                                   {% endif %}
                                   {% if item == "-created" or item == "created" %}
                                       <p>{% trans 'Created' %}</p>
                                   {% endif %}
                               </td>
                               <td class="filter_buttons">
                                   {% if item == "-relevant" %}
                                       <a title="{% trans 'Sort by ascending relevancy' %}" href="{% url 'djaken:all_notes_sort_by_relevant' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}"> <div class="arrow_down"> </div> </a>
                                   {% endif %}
                                   {% if item == "relevant" %}
                                       <a title="{% trans 'Sort by descending relevancy' %}" href="{% url 'djaken:all_notes_sort_by_relevant' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}"> <div class="arrow_up"> </div> </a>
                                   {% endif %}
                                   {% if item == "-modified" %}
                                       <a title="{% trans 'Sort by ascending modified time' %}" href="{% url 'djaken:all_notes_sort_by_modified' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}"> <div class="arrow_down"> </div> </a>
                                   {% endif %}
                                   {% if item == "modified" %}
                                       <a title="{% trans 'Sort by descending modified time' %}" href="{% url 'djaken:all_notes_sort_by_modified' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}"> <div class="arrow_up"> </div> </a>
                                   {% endif %}
                                   {% if item == "-created" %}
                                       <a title="{% trans 'Sort by ascending created time' %}" href="{% url 'djaken:all_notes_sort_by_created' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}"> <div class="arrow_down"> </div> </a>
                                   {% endif %}
                                   {% if item == "created" %}
                                       <a title="{% trans 'Sort by descending created time' %}" href="{% url 'djaken:all_notes_sort_by_created' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}"> <div class="arrow_up"> </div> </a>
                                   {% endif %}
                               </td>
                           {% endfor %}
                           <td class="filter_label">
                               <p>{% trans 'Relevant?:' %}</p>
                           </td>
                           <td class="filter_buttons">
                               {% if only_relevant == True %}
                                   <a title="{% trans 'Show irrelevant notes too' %}" href="{% url 'djaken:all_notes_toggle_relevant' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}" class="toggle-control toggle-on"></a>
                               {% else %}
                                   <a title="{% trans 'Show only relevant notes' %}" href="{% url 'djaken:all_notes_toggle_relevant' %}?sort_order={{sort_order}}&only_relevant={{only_relevant}}&search={{search_text}}" class="toggle-control"></a>
                               {% endif %}
                           </td>
                       </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    {% for note in notes %}
    <div class="each_note">
        <h2>
            <a title="{% trans 'View this note' %}" href="{% url 'djaken:view_note' note.pk %}">
                {{note.title}}
            </a>
        </h2>
        <table class="outer">
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td>
                                {% if note.is_encrypted %}
                                    <p class="encryption_icon"></p>
                                {% endif %}
                            </td>
                            <td>
                                {% if note.relevant %}
                                    <p class="note_relevant">
                                        {% trans 'Relevant' %}
                                    </p>
                                {% endif %}
                                {% if not note.relevant %}
                                    <p class="note_not_relevant">
                                        {% trans 'Not Relevant' %}
                                    </p>
                                {% endif %}
                            </td>
                            <td>
                                <p>
                                    {% trans 'Modified on' %}
                                    <time datetime="{{note.modified|date:"c"}}">
                                        {{note.modified|date}}
                                    </time> 
                                </p>
                            </td>
                            <td>
                                <p>
                                    {% trans 'Created on' %}
                                    <time datetime="{{note.created|date:"c"}}">
                                        {{note.created|date}}
                                    </time> 
                                </p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        </p>
    </div>
    {% endfor %}
    <script ="text/javascript">
        function getSearchText() {
            var searchText = document.getElementById("search_text").value;
            var sortOrder = document.getElementById("sort_order").value;
            var onlyRelevant = document.getElementById("only_relevant").value;
            document.getElementById("search_button").setAttribute("href", "{% url 'djaken:all_notes' %}?sort_order=" + sortOrder + "&only_relevant=" + onlyRelevant + "&search=" + searchText);
        }
        function searchKeyPress(e)
        {
            // look for window.event in case event isn't passed in
            e = e || window.event;
            if (e.keyCode == 13)
            {
                getSearchText();
                document.getElementById("search_button").click();
                return false;
            }
            return true;
        }
    </script>
{% endblock %}