{% extends "corpus/base.html" %}
{% load static %}
{% load iepy_tags %}

{% block content_title %}{% endblock %}
{% block extrastyle %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/segment.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/segment_questions.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/document_questions.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/csshake.min.css' %}" />
{% endblock %}

{% block extra_js %}
    <script type="text/javascript" src="{% static 'js/vendor/jquery-ui.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/vendor/angular.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/vendor/angular-route.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/vendor/angular-resource.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/vendor/angular-cookies.min.js' %}"></script>

    <script type="text/javascript">
        var eos = {{ eos_propperties|safe }};
        var relations = {{ relations_list|safe }};
        var forms = {{ forms_values|safe }};
        var question_options = {{ question_options|safe }};
        var other_judges_labels = {{ other_judges_labels|safe }};
        var initial_tool = "{{ initial_tool }}";
        var eo_creation_url = "{% url 'corpus:create_entity_occurrence' %}";
        var different_kind = {%  if different_kind %} true {% else %} false {% endif %};
    </script>
    <script type="text/javascript" src="{% static 'js/document_questions.js' %}"></script>
{% endblock %}

{% block label_mode_switch %}
    <a href="{% url 'corpus:next_segment_to_label' relation.pk %}"
       title="Next segment with un-labeled evidences.">Label by segments</a>
{% endblock %}

{% block navigation %} 
    <div class="right">
        <a href="{% url 'corpus:navigate_labeled_documents_judgeless' relation.pk document.pk 'back' %}"
           title="Previous labeled document">Previous document labeled</a>
        &rsaquo;
        <a href="{% url 'corpus:navigate_labeled_documents_judgeless' relation.pk document.pk 'forth' %}"
           title="Next labeled document">Next document labeled</a>
    </div>

    <a href="{% url 'corpus:navigate_labeled_documents' relation.pk document.pk 'back' %}"
        title="Previous labeled document">Last document labeled by you</a>
    &rsaquo;
    <a href="{% url 'corpus:navigate_labeled_documents' relation.pk document.pk 'forth' %}"
       title="Next labeled document">Next document you labeled</a>
    &raquo;
    <a href="{% url 'corpus:next_document_to_label' relation.pk %}"
       title="Next document with un-labeled evidences.">Next document to label</a>
{% endblock %}

{% block inner_content %}
    <div class="wrapper" ng-app="labelingApp" ng-controller="QuestionsController">
        <div class="row">
            <div class="large-12 columns document" data-document-id="{{ document.id }}">
                {% if not segments %}
                    <br />
                    <div data-alert class="alert-box info radius">
                        There are no more things to tag in this document, try skipping to the next one!
                    </div>
                {% endif %}
            </div>
        </div>
        <br />
        <div class="row">
            <div class="large-3 medium-3 columns">
                <label>Display metadata</label>
                <input type="radio" name="metadata_visible" value="pos" ng-model="metadata_visible" id="postag-option">
                <label for="postag-option">POS tag</label>

                <input type="radio" name="metadata_visible" value="lemma" ng-model="metadata_visible" id="lemma-option">
                <label for="lemma-option">Lemma</label>

                <input type="radio" name="metadata_visible" value="none" ng-model="metadata_visible" id="none-option">
                <label for="none-option">None</label>
                <hr />

                {% if form_toolbox %}
                    <div class="toolbox">
                        Tag using this answer:
                        {{ form_toolbox }}

                        <span class="secondary label">
                            Use the number keys to switch between options
                        </span>
                    </div>
                {% endif %}
                {% if formset %}
                    <br />
                    For the rest of the posible relations the answer will be:
                    <form action="." method="POST">
                        {% csrf_token %}
                        {{ formset.management_form }}
                        <input type="hidden" id="partial-save" name="partial_save" value="" />

                        <div class="row">
                            <div class="large-12 columns non-selected-relations">
                                {{form_for_others}}
                            </div>
                        </div>

                        {% for form in formset %}
                            {{ form.as_p }}
                        {% endfor %}

                        <div class="row">
                            <div class="large-6 columns">
                                <input class="button" type="submit" value="Save and continue" />
                            </div>
                        </div>
                    </form>
                {% endif %}

                {% if segments %}
                    <div class="prev-relations-wrapper">
                        View labels by:
                        <select class="judge-answers-wrapper">
                            <option value="me">
                                Me
                            </option>
                            {% for judge in other_judges %}
                                <option value="{{ judge }}">
                                    {{ judge }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
            </div>


            <div class="large-9 medium-9 columns">
                {% if subtitle %} <div class="title"> {{subtitle}} </div> {% endif %}
                <svg xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        {% for i in question_options %}
                            <marker id="arrow-point-{{ i }}" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
                                <path d="M2,1 L2,10 L10,6 L2,2" class="arrow-point-{{ i }}"/>
                            </marker>
                        {% endfor %}
                    </defs>
                </svg>

                <div class="segments">
                <br />
                    {% include "corpus/segments_render.html" %}
                </div>
            </div>
        </div>
    </div>

    {% include "corpus/eo_edition_modal.html" %}
    {% include "corpus/eo_creation_modal.html" %}
{% endblock %}
