{% load iepy_tags %}

<ul id="token-edition-dropdown" class="f-dropdown" data-dropdown-content>
    <li><a id="create-eo-item" href="#">Create new entity occurrence</a></li>
    <li><a id="modify-eo-item" href="#">Modify entity occurrence</a></li>
</ul>

{% for segment, parsed in segments|zip:parsed_sentences %}
    <div class="segment {% cycle 'odd' 'even' %} segment-id-{{segment.id}}" data-segment-id="{{ segment.id }}">
        {% if parsed %}
            <div class="parse-tree-button-wrapper">
                <a class="parse-tree-button" data-reveal-id="parse-tree-{{ forloop.counter }}"><i class="fi-trees"></i></a>

                <div id="parse-tree-{{ forloop.counter }}" class="reveal-modal" data-reveal>
                    <h3>Parse tree</h3>
                    <pre> {% for token in segment.rich_tokens %} {{ token.token }} {% endfor %}</pre>
                    <hr />
                    <pre> {{parsed}} </pre>
                    <a class="close-reveal-modal">&#215;</a>
                </div>
            </div>
        {% endif %}

        {% with forloop.counter as segment_counter %}
        {% for rich_token in segment.rich_tokens %}
            {% if rich_token.eo_ids %}
                <div class="rich-token rich-token-{{ segment_counter }}-{{ forloop.counter }}
                            entity-occurrence {% for eo_id in rich_token.eo_ids %} eo-{{ eo_id }} {% endfor %}"
                    ng-click="eo_click({{ rich_token.eo_ids }})"
                    ng-class="{
                        selectable: {% for eo_id in rich_token.eo_ids %}
                            eos[{{ eo_id }}].selectable
                                {% if not forloop.last %} && {% endif %}
                            {% endfor %},
                        selected: {% for eo_id in rich_token.eo_ids %}
                            eos[{{ eo_id }}].selected
                                {% if not forloop.last %} || {% endif %}
                            {% endfor %}
                    }"
                    {% if rich_token.eo_ids|length > 1 %}
                        data-dropdown="eo-hover-{{ segment_counter }}-{{ forloop.counter }}"
                        data-options="is_hover:true"
                    {% else %}
                        data-dropdown="token-edition-dropdown"
                        data-eo-id="{{ rich_token.eo_ids.0 }}"
                        ng-right-click="token_context_menu('{{ segment_counter }}-{{ forloop.counter }}')"
                    {% endif %}
                >
            {% else %}
                <div class="rich-token rich-token-{{ segment_counter }}-{{ forloop.counter }}"
                    ng-right-click="token_context_menu('{{ segment_counter }}-{{ forloop.counter }}')" 
                    data-dropdown="token-edition-dropdown"
                >
            {% endif %}
                {% if rich_token.eo_ids|length > 1 %}
                    <div class="multiple-marker"> [{{ rich_token.eo_ids|length }}] </div>
                {% endif %}

                <span class="pos-tag" ng-show="metadata_visible == 'pos'"> {{ rich_token.pos }} </span>
                <span class="lemma" ng-show="metadata_visible == 'lemma'"> {{ rich_token.lemma }} </span>
                <span class="token" data-offset="{{ rich_token.offset }}"> {{ rich_token.token }} </span>
            </div>

            {% if rich_token.eo_ids|length > 1 %}
                <ul id="eo-hover-{{ segment_counter }}-{{ forloop.counter }}" class="f-dropdown" data-dropdown-content>
                    {% for eo_id, eo_kind in rich_token.eo_ids|zip:rich_token.eo_kinds %}
                        <li>
                            <a href="#" class="eo-submenu" data-eo-id="{{ eo_id }}"
                                ng-right-click="display_edition_modal({{ eo_id }}, {{segment.id}})"
                            >
                                #{{ forloop.counter }} - {{ eo_kind }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        {% endfor %}
        {% endwith %}
    </div>
{% endfor %}
