{% extends "base_vue.html" %}
{% from "elements/upload.html" import vue_upload_button_tab_modal %}
{% from "_macros.html" import render_resource_link, render_rdfa_resource_link, get_label, facts_panel, summary_panel, content %}
{% block title %}{{get_label(this.description())}}{% endblock %}
{% block styles %}
<style>
.hover {
    filter: drop-shadow(gray 0 0 0.5rem);
}
.selected {
    filter: drop-shadow(blue 0 0 0.5rem);
}
</style>
{% endblock %}
{% block scripts %}
    <script type="module" src="{{ url_for('static',filename='plugins/fediverse/js/discussion.js')}}"></script>

{% endblock %}
{% block content %}
{% set attributes = this | include("attributes") | fromjson  %}

    <md-card-header>
        <md-card-header-text>
            <ul class="nav nav-tabs">
                {% for v in this | get_views_list -%}
                <li class="nav-item {% if v['view'].value == view %}active{% endif %}">
                    <a class="nav-link {% if v['view'].value == view %}active{% endif %}"
                       href="{{url_for('entity.view', uri=this.identifier, view=v['view'])}}">
                        {{v['label']}}
                    </a>
                </li>
                {%- endfor %}
                {% if this.description().value(ns.whyis.hasFileID) %}
                <li class="nav-item">
                    <a class="nav-link"
                       href="{{url_for('entity.view',uri=this.identifier)}}">
                        Download
                    </a>
                </li>
                {% endif %}
                <li class="nav-item">
                    {{ vue_upload_button_tab_modal(this) }}
                </li>
                {% if not this.identifier.startswith(ns.local) %}
                <li class="nav-item">
                    <a class="nav-link" href="{{this.identifier}}"
                       aria-label="Visit Page" title="Visit Page">
                       Visit
                    </a>
                </li>
                {% endif %}
            </ul>
            <div class="md-layout md-gutter md-alignment-center-left" style = "margin-top: 6px;">
                <div class = "md-layout-item">
                    <div class="md-title">{{attributes.label}}</div>
                    {% if attributes.type | length > 0 %}<div class="md-subhead" style="max-width: fit-content;">
                        {% for type in attributes.type %}{{type.label}}{% if not loop.last %}, {% endif %} {% endfor %}
                    </div>{% endif %}
                </div>
            </div>
        </md-card-header-text>
        {% if attributes.thumbnail %}<md-card-media md-big >
            <img src="{{url_for('entity.view', uri=attributes.thumbnail)}}" alt="{{attributes.label}}"/>
        </md-card-media>{% endif %}
    </md-card-header>
    <md-card-content>
        <div class="md-layout md-gutter">
            <div class="md-layout-item">
                <fedi-discussion></fedi-discussion>
            </div>
        </div>
    </md-card-content>
{% endblock %}