{% load i18n %}
{% load common_filters %}

{% comment %}
<!--
  Copyright (C) 2011 University of Dundee & Open Microscopy Environment.
  All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
{% endcomment %}

{% comment %}
<!--
  This is the content of a form for adding new Tags or choosing existing ones.
  Loaded by AJAX into a form dialog.
-->
{% endcomment %}

<div class="standard_form">


    <h1>{% trans "Select from available tags" %}:</h1>

    <div class="tag_selection_container">

    <div>

        <h1>{% trans "Available Tags" %}: <span id="id_tags_selected"></span></h1>
{% comment %}Spaces in placeholder are important so user can input the actual placeholder text without it getting removed{% endcomment %}
        <input type="text" id="id_tag_filter" placeholder="Filter   " />
        <div class="tag_selection_wrapper filtered">
            <div id="id_all_tags" class="tag_selection"></div>
        </div>
        <div>
            Filter by
            <select name="filter_mode">
                <option value="start">start of tag name</option>
                <option value="any" selected="selected">anywhere in tag name</option>
            </select><br />
            Filter by owner
            <select name="filter_owner_mode">
                <option value="all">All</option>
                <option value="me">owned by me</option>
                <option value="others">owned by others</option>
            </select>
        </div>
    </div>


    <div id="id_move_tags">

        <button id="id_tag_select_button"> <img src="{% static "webclient/image/icon_arrow_right.png" %}" /> </button>
        <button id="id_tag_deselect_button"> <img src="{% static "webclient/image/icon_arrow_left.png" %}" /> </button>

    </div>

    <div>

        <h1>{% trans "Selected Tags" %}:</h1>
        <div class="tag_selection_wrapper">
            <div id="id_selected_tags" class="tag_selection"></div>
        </div>

    </div>

    </div>

    <div style="clear: left; padding-top: 15px;">
        <h1 id="id_selected_tag_set">
            {% trans "Add a new tag and select it immediately" %}:</h1>

        <input type="text" id="id_tag" placeholder='Tag   '/>
        <textarea id="tag_description" placeholder='Description   '></textarea>

        <button id="id_add_new_tag"> Add </button>
    </div>

        <!-- hidden fields used to specify the objects we're tagging -->
        <div class="hiddenField">{{ form_tags.image }}</div>
        <div class="hiddenField">{{ form_tags.dataset }}</div>
        <div class="hiddenField">{{ form_tags.project }}</div>
        <div class="hiddenField">{{ form_tags.screen }}</div>
        <div class="hiddenField">{{ form_tags.plate }}</div>
        <div class="hiddenField">{{ form_tags.acquisition }}</div>
        <div class="hiddenField">{{ form_tags.well }}</div>
        <div class="hiddenField"><input type="text" name="index" value="{{ index }}"/></div>

        <div class="hiddenField">{{ form_tags.tags }}</div>
        <div class="hiddenField">{{ newtags_formset.management_form }}</div>

</div>


<script>
    tagging_form([{% for st in selected_tags %}[{{ st.0 }},{{ st.1 }},"{{ st.2|escape }}", {{ st.3|lower }}, "{{ st.4 }}", {{ st.5|lower }}],{% endfor %}], "{{ newtags_formset.prefix }}", "{{ form_tags.tags.auto_id }}", {{ ome.user.id }}, "{{ ome.user.firstName|escape }} {{ ome.user.lastName|escape }}");
</script>
