{% extends "layout_plan.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% load i18n %}
{% load filters %}

{% block styles %}
    <style type="text/css">
        #progress, #info, #lead, #stages {
            margin-bottom: 1rem;
        }

        #kicker h1 {
            display: inline;
            font-weight: bold;
        }

        #authors, #meta {
            font-weight: bold;
        }

        #meta {
            text-align: right;
        }

        figure img {
            max-width: 100%;
        }

        .select2.select2-container {
            width: 100% !important;
        }

        .panel {
            padding: 2rem;
            margin-bottom: 2.5rem;
        }

        .panel.www,
        .panel.info,
        .panel.warning,
        .panel.greeting {
            border: solid 1px #ddd;
            border-radius: 15px;
        }

        .panel.www h3,
        .panel.info h3,
        .panel.warning h3,
        .panel.greeting h3 {
            text-align: center;
            font-size: 200%;
        }

        .panel.term, .panel.term pre {
            padding: 1rem;
            border: none;
            background: #000;
            color: #90ff00;
            font-family: 'Courier New';
            overflow: scroll;
        }

        .panel.default {
            background: #f8f9fa;

        }

        /*        .paywall-notice {
                   width: 100%;
                   text-align: center;
                   border-bottom: 1px solid #000;
                   line-height: 0.1em;
                   margin: 10px 0 20px;
                }

                .paywall-notice span {
                    background:#fff;
                    padding:0 10px;
                }*/

        .paywall-notice {
            overflow: hidden;
            text-align: center;
            color: #828282;
            margin: 2.66rem 0rem;
        }

        .paywall-notice:before,
        .paywall-notice:after {
            background-color: #828282;
            content: "";
            display: inline-block;
            height: 1px;
            position: relative;
            vertical-align: middle;
            width: 50%;
        }

        .paywall-notice:before {
            right: 0.5em;
            margin-left: -50%;
        }

        .paywall-notice:after {
            left: 0.5em;
            margin-right: -50%;
        }

        #id_css {
            font-family: "Lucida Console", Monaco, monospace;
        }
    </style>
    
    {% if post.css %}
    <style id='custom_css' type="text/css">
        {{ post.css }}
    </style>
    {% endif %}
{% endblock %}

{% block content %}
    {% with stages=stages %}{% include 'magplan/posts/_progress.html' %}{% endwith %}

    <h1>{{ post }}</h1>

    <div id="actions" style="margin-bottom: 1rem;">
        {% trans "edit" as edit_label %}
        <a class="btn btn-warning" href="{% url 'posts_edit' post.id %}">{{ edit_label|capfirst }}</a>

        <a class="btn btn-primary" data-toggle="collapse" href="#meta_form_container" role="button"
           aria-expanded="false" aria-controls="meta_form_container">Редактировать мету</a>

        <div class="dropdown" style="display: inline-block">
            <a class="btn btn-success dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Скачать контент
            </a>

            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="{% url 'posts_download_content' post.id %}">Изображения</a>
            </div>
        </div>

        {% if post.wp_id %}
            <a class="btn btn-info" href="{% url 'posts_send_to_wp' post.id %}">Загрузить в WordPress</a>
        {% endif %}
    </div>

    <div class="row" style="margin-bottom: 1rem;">
        <div class="col-12">
            <div class="collapse multi-collapse" id="meta_form_container">
                <div class="card">
                    <form id="save_post_form"
                          action="{% url 'posts_edit_meta' post.id %}"
                          method="POST">
                        {% csrf_token %}

                        <div class="card-header bg-primary text-white">Редактировать данные статьи</div>
                        <div class="card-body">
                            <div class="row">
                                {% with form=meta_form %}
                                    {% include "magplan/posts/_form_meta.html" %}
                                {% endwith %}
                            </div>
                        </div>
                        <div class="card-footer">
                            <input class="btn btn-success float-right" type="submit" value="Обновить"/>
                            <div style="clear:both"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="info" class="row">
        <div id="authors" class="col-9">
            {% if post.authors.all|length > 0 %}
                {% trans "writes" %}
                {% for author in post.authors.all %}
                    {% if perms.main.manage_authors %}
                        <a href="{% url 'authors_show' author.id %}">{{ author }}</a>{% if forloop.last is False %},
                    {% else %}.{% endif %}
                    {% else %}
                        {{ author }}{% if forloop.last is False %}, {% else %}.{% endif %}
                    {% endif %}
                {% endfor %}
            {% else %}
                {% trans "no_author" %}.
            {% endif %}

            {% if perms.main.manage_authors %}
                {% trans "edits" %} <a href="{% url 'authors_show' post.editor.id %}">{{ post.editor }}</a>
                {% if forloop.last is False %}, {% else %}.{% endif %}
            {% else %}
                {% trans "edits" %} {{ post.editor }}{% if forloop.last is False %}, {% else %}.{% endif %}
            {% endif %}

            <br/>
            <span id="imprint">
                Последнее изменение: {{ post.updated_at }}{% if post.last_updater %} от
                {{ post.last_updater }}{% endif %}
            </span>

            <br/>
            <a class="" data-toggle="collapse" href="#description" role="button"
               aria-expanded="false" aria-controls="description">
                {% trans "show_article_description" %}
            </a>
        </div>

        <div id="meta" class="col-3">
            {% if post.issues.all|length > 0 %}
                {% for issue in post.issues.all %}
                    <a href="{% url 'issues_show' issue.id %}">{{ issue }}</a>{% if forloop.last is False %}, {% else %}
                    .{% endif %}
                {% endfor %}
            {% endif %}

            {% if post.section %}
                <br/>{{ post.section.title }}
            {% endif %}
        </div>
    </div>

    <div class="collapse" id="description">
        <div class="card card-body">
            {{ post.description_html|safe }}
        </div>
        <br/>
    </div>

    {% include 'magplan/posts/_stages.html' %}

    {% with post=post %}{% include 'magplan/posts/_paywall_alert.html' %}{% endwith %}

    <div class="row">
        <div class="col-12">
            <a href="#comments" class="float-right">К комментариям ({{ post.comments.all|count_human_comments }})</a>
        </div>
    </div>

    <section id="intance_chunk">
        {{ instance_chunk | safe }}
    </section>

    <section id="attachments" style="margin-bottom: 1rem;">
        {% with pdfs=post.pdfs files=post.files hide_images=True hide_upload_form=True %}
            {% include 'magplan/posts/_attachments.html' %}
        {% endwith %}
    </section>

    {% if post.html %}
        <section class="article-preview"
                 style="padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 1rem;"
                 id="preview">
            <link rel='stylesheet' id='Ubuntu-css'
                  href='https://fonts.googleapis.com/css?family=Ubuntu%3A300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic&#038;subset=latin%2Ccyrillic'
                  type='text/css' media='all'/>

            <div class="inner">{{ post.html|safe }}</div>
        </section>
    {% endif %}

    {# Support for generic comments template #}
    {% with comments=post.comments_ form=comment_form action_url=post|url_for_post_comments %}
        {% include 'magplan/partials/comments.html' %}
    {% endwith %}

{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        {#window.DELETE_ATTACHMENT_URL = "{{ app.router['posts_delete_attachment'].url_for(post_id=post.id|string) }}";#}
        {#window.DELETE_ATTACHMENT_URL = "{{ app.router['posts_delete_attachment'].url_for(post_id=post.id|string) }}";#}
    </script>
{% endblock %}
