{% extends "webpage/base.html" %}
{% load static %}
{% load django_tables2 %}
{% block title %} {{ object }} {% endblock %}
{% block scriptHeader %}
{{ block.super }}
{% if tei %}
    <link rel="stylesheet" href="{{ ceteicean_css }}" media="screen" charset="utf-8">
    <script src="{{ ceteicean_js }}"></script>
{% endif %}
{% if iiif %}
    <script src="{{ openseadragon_js }}"></script>
{% endif %}
{% endblock scriptHeader %}
{% block content %}
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-2">
                    {% if object.get_prev_url %}
                        <h2>
                            <a href="{{ object.get_prev_url }}" style="float:right">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left">
                                    <polyline points="15 18 9 12 15 6" />
                                </svg>
                            </a>
                        </h2>
                    {% endif %}
                </div>
                <div class="col-md-8">
                    <h2 style="text-align: center;">
                        {% if object.get_listview_url %}
                            <a href="{{ object.get_listview_url }}">
                                <small>{{ entity_type }}s</small>
                            </a>
                        {% else %}
                            <small>{{ entity_type }}s</small>
                        {% endif %}
                        {{ object }}
                        {% if user.is_authenticated %}
                            {% if object.get_edit_url %}
                                    <a href="{{ object.get_edit_url }}">
                                        <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                        </svg>
                                    </a>
                            {% endif %}
                            {% if object.get_delete_url %}
                                |
                                    <a href="{{ object.get_delete_url }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash">
                                            <polyline points="3 6 5 6 21 6" />
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                                        </svg>
                                    </a>
                            {% endif %}
                        {% endif %}
                    </h2>
                </div>
            <div class="col-md-2">
                {% if object.get_next_url %}
                    <h2>
                        <a href="{{ object.get_next_url}}" style="float:left">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6" />
                            </svg>
                        </a>
                    </h2>
                {% endif %}
            </div>
        </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h3>
                                General Info
                                <a href="/entity/{{object.id}}">
                                    <small>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database">
                                            <ellipse cx="12" cy="5" rx="9" ry="3" />
                                            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
                                            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
                                        </svg>
                                    </small>
                                </a>
                            </h3>
                        </div>
                        <div class="card-body">
                            {% block info-table %}
                            <table class="table table-bordered table-hover">
                                <tr>
                                    <th>
                                        Titel
                                    </th>
                                    <td>
                                        {{ object.name }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Labels
                                    </th>
                                    <td>
                                        {% for x in no_merge_labels %}
                                            <li>
                                                <small>{{ x.label_type }}: </small>{{ x.label }}
                                            </li>
                                        {% endfor %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        ID
                                    </th>
                                    <td>
                                        {{ object.id }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Type
                                    </th>
                                    <td>
                                        {{ object.kind}}
                                    </td>
                                </tr>
                                {% if object.start_date or object.end_date %}
                                <tr>
                                    <th>
                                        Date
                                    </th>
                                    <td>
                                        {% if object.start_date_written %}
                                            <abbr title="{{ object.start_date }}">{{ object.start_date_written }}</abbr>
                                        {% endif %}
                                        {% if object.end_date %}
                                            - <abbr title="{{ object.end_date }}">{{ object.end_date_written }}</abbr>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                  <th>
                                    Notes
                                  </th>
                                  <td>
                                    {{ object.notes }}
                                  </td>
                                </tr>
                                <tr>
                                  <th>
                                    References
                                  </th>
                                  <td>
                                    {{ object.references }}
                                  </td>
                                {% endif %}
                                {% if object.lat %}
                                    <tr>
                                        <th>
                                            Lat/Lng
                                        </th>
                                        <td>
                                            {{ object.lat }} / {{ object.lng }}
                                        </td>
                                    </tr>
                                {% endif %}
                            </table>
                            {% endblock info-table %}
                            {% block info-metadata %}
                                <table class="table table-bordered table-hover">
                                    <tr>
                                        <th>
                                            Collection(s)
                                        </th>
                                        <td>
                                            {% for x in object.collection.all %}
                                                <li>
                                                    {{ x }}
                                                </li>
                                            {% endfor %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Uri(s)
                                        </th>
                                        <td>
                                            {% for x in object.uri_set.all %}
                                                <a href="{{ x }}">{{ x }}</a> <br />
                                            {% endfor %}
                                        </td>
                                    </tr>
                                    {% if object.notes %}
                                        <tr>
                                            <th>
                                                Notes
                                            </th>
                                            <td>
                                                {{ object.notes }}
                                            </td>
                                        </tr>
                                    {% endif %}
                                    {% if object.references %}
                                        <tr>
                                            <th>
                                                References
                                            </th>
                                            <td>
                                                {{ object.references }}
                                            </td>
                                        </tr>
                                    {% endif %}
                                </table>
                            {% endblock info-metadata %}
                            {% block left-pane-additional %}
                            {% endblock left-pane-additional %}
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h3>Relations</h3>
                        </div>
                        <div class="card-body">
                            {% block relations %}
                                {% for obj in right_card %}
                                    {% if obj.1.data|length > 0 %}
                                        <div class="card card-default">
                                            <div class="card-heading">
                                                <h4 class="card-title"> {{ obj.0 }}</h4>
                                            </div>
                                            <div class="card-body">
                                                <div id="tab_{{ obj.2 }}" class="card-body">
                                                        {% render_table obj.1 %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% endblock relations %}
                        </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h2>Texts</h2>
        </div>
        <div class="card-body">
            {% if object.text.all %}
                <div class="card-body">
                    <legend>
                        Texts
                    </legend>
                    {% for x in object.text.all %}
                        <div class="card card-default">
                            <div class="card-heading">
                                {% if x.kind.name in tei %}
                                    <h4 class="card-title"> TEI </h4>
                                {% else %}
                                    <h4 class="card-title"> {{ x.kind }}</h4>
                                {% endif %}
                            </div>
                            {% if x.kind.name in tei %}
                                <div class="card-body tei" id="teisource">
                                    {{ x.text }}
                                </div>
                                <div id="teiviewer">

                                </div>
                            {% else %}
                            <div class="card-body tei-text">
                                {{ x.text }}
                            </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="card-body">
                    <legend>No text provided for this {{entity}}</legend>
                </div>
            {% endif %}
            {% if iiif %}
            <div class="card-body">
                <div id="iiif" style="width: 100%; height: 400px"/>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock content %}
{% block scripts %}
    {{block.super}}
    {% if tei %}
        <script type="text/javascript">
            var CETEIcean = new CETEI();
            var teiString = $("#teisource").text();
            CETEIcean.makeHTML5(teiString, function(data) {
                $('#teisource').hide()
                document.getElementById("teiviewer").appendChild(data)
                CETEIcean.addStyle(document, data);
            });
        </script>
    {% endif %}
    {% if iiif %}
        <script type="text/javascript">
            var viewer = OpenSeadragon({
                id: "iiif",
                tileSources: "{{iiif_server }}{{iiif_info_json }}info.json",
                prefixUrl: "{{ openseadragon_img }}"
            });
        </script>
    {% endif %}
{% endblock scripts %}
