{% extends "newman/change_list.html" %}
{% load newman_list admin_list %}

{% block breadcrumbs %}
    {% if not is_popup %}
        <div class="breadcrumbs">
            <div style="float: left;">
                <a href="{% url newman:index %}#">{% trans "Home" %}</a>
                &rsaquo; TODO: view has not app_label in context</a>
                &rsaquo; TODO: view has not title (eg. Timeline for 'blabla' export range X-Y)
            </div>
        </div>
    {% endif %}
{% endblock %}
{% block content_toolbar_left %}
    <form action="/ellaexports/export/timeline/" method="get" class="js-form">
          {{ export_form.export_slug.label }}: {{ export_form.export_slug }}
          {{ export_form.range_from.label }}: {{ export_form.range_from }}
          <a id="id-send-timeline" class="js-submit icn btn ok">{% trans "Send" %}</a>
        <ul>
    </form>
{% endblock %}
{% block content_toolbar_right %}{% endblock %}


{% block content %}

    <div id="id-modal-dialog" class="noscreen service-module">
        <div id="id-publishable-dialog" class="service-module-in" style="height: 40px; overflow: auto; position: fixed; top:200px; left: 100px;">
            <label for="id_publishable_suggest" style="float: left;">{% trans 'Publishable object' %}: </label>
            <div style="width: 300px; float: left;">
                <input id="id_publishable" class="vForeignKeyRawIdAdminField hidden" type="text" name="publishable" style="display: none;"/>
                <ul class="GenericSuggestField">
                <li>
                <input id="id_publishable_suggest" type="text" rel="/core/publishable/suggest/?f=__unicode__&f=title&f=slug&q=" autocomplete="off"/>
                </li>
                </ul>
                <!-- a id="lookup_id_publishable" class="suggest-related-lookup" href="/core/publishable/?pop"></a -->
            </div>
            <a id="id-continue-dialog" class="icn btn ok">{% trans "Continue" %}</a>
            <a id="id-close-dialog" class="icn btn cancel">{% trans "Close" %}</a>
        </div>
    </div>
    <div id="id-exportmeta-modal-dialog" class="noscreen service-module">
        <div id="id-exportmeta" class="service-module-in" style="height: 440px; overflow: auto; position: fixed; top:100px; left: 100px;">
        </div>
    </div>

    <div class="timeline-table">
    <!-- timeline items -->
    {% for column in timeline_data %}
        <div class="timeline-column">
        <p class="description">
            {{ column.0 }}
        </p>
        <div class="timeline-ul">
            {% for cell in column %}
                {% if not forloop.first %}
                    <div class="timeline-item">
                        <div class="timeline-item-header">
                            <span class="counter">{{ forloop.counter0 }}</span>
                            {% if cell.pk %}
                                &nbsp;
                                <span class="timeline-item-navigation noscreen">
                                    <a
                                        id="change_{{ forloop.counter0 }};{{ cell.pk }};{{ export.pk }};{{ cell.column_date_from }}"
                                        class="icn btn edit js-hashadr"
                                        href="{% get_newman_url for cell %}"
                                    >{% trans "Change" %}</a> {# odskok na editaci publishable objektu #}
                                    {% comment %}<span
                                        id=""
                                        class="delete"
                                    >{% trans "Delete" %}</span>{% endcomment %}

                                    {% comment %}
                                    <span
                                        id="{{ forloop.counter0 }};{{ cell.pk }};{{ export.pk }};{{ cell.column_date_from }}"
                                        class="append"
                                    >{% trans "Append" %}</span>
                                    <span
                                        id="{{ forloop.counter0 }};{{ cell.pk }};{{ export.pk }};{{ cell.column_date_from }}"
                                        class="insert"
                                    >{% trans "Insert" %}</span>
                                    {% endcomment %}

                                    {# newmanurl newman:exports_export_timeline_insert id_item=cell.pk,id_export=export.pk,position=forloop.counter #}
                                </span>
                            {% endif %}
                        </div>
                        <p>{{ cell }}</p>
                        {% if cell.pk %}
                            <div class="timeline-item-hitcounts">{% trans "Hit Counts" %}: {{ cell.hitcount.hits }}</div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}
        </div> {# timeline-ul #}
        </div> {# timeline-column #}
    {% endfor %}
    <h1> {{ NEWMAN_MEDIA_URL }} </h1>
    </div> {# timeline-table #}
    <!-- end of timeline items -->

    {% comment %}{# TIMELINE AS TABLE #}
    <table id="id-exported-items">
    {% for row in timeline_table %}
        <tr>
            {% for column in row %}
                {% if forloop.parentloop.first %}
                    <th>{{ column }}</th>
                {% else %}
                    <td><p class="timeline-item">{{ column }}</p></td>
                {% endif %}
            {% endfor %}
        </tr>
    {% endfor %}
    </table>
    {% endcomment %}{# TIMELINE AS TABLE #}
{% endblock %}


{% block content_js %}
    {{ block.super }}
    <script type="text/javascript">
        request_media(MEDIA_URL + 'jquery/jquery-ui.js');
        request_media(MEDIA_URL + 'jquery/jquery-urldecode-encode.js');
        request_media(MEDIA_URL + 'jquery/jquery-ui-smoothness.css');
        request_media(MEDIA_URL + 'css/datetime.css');
        request_media(MEDIA_URL + 'js/datetime.js');
        request_media(MEDIA_URL + 'js/generic.suggest.js');
        request_media(MEDIA_URL + 'css/generic.suggest.css');
    </script>

    <!-- timeline scripting -->
    <script type="text/javascript">
        timeline_init();
    </script>
{% endblock %}
