{% extends 'base.html' %}

{% block title %}{{ desired_translation.title }}{% endblock %}
{% block date %}{{ article.date|date:"Y-m-d" }}{% endblock %}

{% block longdescription %}{{ desired_translation.unformatted_content|truncatechars:500 }}{% endblock %}

{% block description %}{% if article.authors.count %}by {{ article.authors.all|join:", " }} // {% endif %}{{ desired_translation.subtitle }}{% endblock %}

{% block image %}{% if article.image %}{{ article.image.url }}{% else %}{% endif %}{% endblock %}

{% block pagetype %}article{% endblock %}

{% block content %}
<article class="page-content">
    <div class="ui container">
        <div class="print-hide">
            {% if request.user.is_staff %}
            <div class="ui center aligned basic segment">
                <a href="{% url 'admin:journal_article_change' article.pk %}"
                   class="ui blue icon button">
                   <i class="edit icon"></i>
                   Edit in admin
                </a>
            </div>
            {% endif %}
            <div class="ui stackable grid">
                <div class="five wide column">
                    <h1 class="ui header nfb-article-title">
                        <br>{{ desired_translation.title }}
                    </h1>
                    <h3 class="ui header nfb-article-byline">
                    {% if article.authors.count %}
                    {% for author in article.get_ordered_authors %}
                        <strong>{{ author.name }}</strong>{% if not forloop.last %}, {% endif %}
			<!--<a href="{{ author.get_absolute_url }}"></a>
			{% if author.twitter %} 
			(<a href="https://twitter.com/{{ author.twitter }}">
			@{{ author.twitter }}</a>){% endif %}-->
                    {% endfor %}
                    {% endif %}
                        <div class="sub header">
                            {{ article.date|date:"j. F Y" }}
                        </div>
                    </h3>
                    <h4 class="ui header">
                        {% if article.issue %}
                        
                        <strong>
                        <a href="{{ article.issue.get_absolute_url }}">
                            #{{ article.issue.number }}
                        </a>
                        </strong>
                        {% endif %}
                    </h4>
                    <!--<div class="ui horizontal list">
                        <div class="item">
                            <a href="{{ article.category.get_absolute_url }}" class="ui red label">
                                <i class="{{ article.category.icon }} icon"></i> {{ article.category }}
                            </a>
                        </div>
                        {% for tag in article.tags.all %}
                        <div class="item">
                        <a class="ui tag label" href="{{ tag.get_absolute_url }}">
                            {{ tag.name }}
                        </a>
                        </div>
                        {% endfor %}
                    </div>-->
                    <div class="nfb-article-subtitle">
                        
                    </div>
                    
                </div>
                <div class="eight wide right aligned column">
                    {% if article.image_credit %}
                    <div class="nfb-image-credit">
                        <a href="{{ article.image_credit }}">Image credit</a>
                    </div>
                    {% endif %}
                    {% if article.image %}
					<br><br><br>
                    <img src="{{ article.image.url }}" class="ui big floated right image" />
					{% else %}
					<img src="/static/img/logo-large.png" class="ui big floated right image" />
					{% endif %}
		</div>
		<div class="three wide column">
		<br><br><br>
		{% include 'ads.html' %}
		</div>
            </div>
        </div>
        <div class="print-only">
            <h4 class="ui header article-category">
                {{ article.category.name }}
            </h4>
            <h1 class="ui header article-title">
                {{ desired_translation.title }}
                <div class="sub header">
                    {% if article.authors.count == 0 %}
                    {% for author in article.authors.all %}
                        <strong>
			<a href="{{ author.get_absolute_url }}">
			{{ author.name }}
			</a>
			</strong>{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                    /
                    {% endif %}
                    {{ article.date }}
                    {% if article.issue %}
                    v
                    <strong>
                    <a href="{{ article.issue.get_absolute_url }}">
                        {{ article.issue.title }} (#{{ article.issue.number }})
                    </a>
                    </strong>
                    {% endif %}
                </div>
            </h1>
            <div class="ui basic segment center aligned">
                <p>{{ desired_translation.subtitle }}</p>
            </div>
            <br />
        </div>
        {% if not article.published %}
        <div class="ui error message print-hide">
            <div class="ui two column grid">
                <div class="column">
                    <div class="header">
                        Not published ({{ article.get_word_count }} words)
                    </div>
                    <p>This article won't yet show up elsewhere on the
                    website.</p>
                    <p>Here's what the image will look like when it is
                    published:</p>
                    {% if request.user.is_staff %}
                    <a href="{% url 'admin:journal_article_change' article.pk %}"
                       class="ui blue icon button">
                       <i class="edit icon"></i>
                       Edit in admin
                    </a>
                    {% endif %}
                </div>
                <div class="column">
                    {% include 'article_thumb.html' with article=article only %}
                </div>
            </div>
        </div>
        {% endif %}
        {% if translations %}
        <div class="print-hide nfb-translation-buttons">
            <div class="non-mobile-only">
                <div class="ui buttons">
                    {% for translation in translations %}
                    <a href="{{ translation.get_absolute_url }}"
                       class="ui {% if translation.language == desired_translation.language %}black{% endif %} button">
                        {{ translation.get_language_display }}
                    </a>
                    {% if not forloop.last %}
                    <div class="or" data-text="/"></div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
            <div class="mobile-only">
                <div class="ui vertical buttons">
                    {% for translation in translations %}
                    <a href="{{ translation.get_absolute_url }}"
                       class="ui {% if translation.language == desired_translation.language %}black{% endif %} button">
                        {{ translation.get_language_display }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
		<div class="ui stackable grid">
        <div class="thirteen wide column">
        <div class="article-content section">
            <p>
                {{ desired_translation.formatted_content|safe }}
            </p>
        </div>
		</div>
		<div class="print-hide three wide column" style="padding-left:10px">
			<br>
			{% for art in articles %}
			<strong><a href="/article/{{ art.slug }}">{{ art.title }}</a></strong><br><br>
			{% endfor %}
		</div>
		</div>
        {% with num_authors=article.authors.count %}
        {% if num_authors == 0 %}
        <hr>
        <div class="section">
            <h3 class="section-header">avtor{{ num_authors|pluralize }}</h3>
            {% for author in article.authors.all %}
            {% include 'author_bio.html' with author=author only %}
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        {% with related=article.get_related %}
        {% if related %}
        {% include 'article_toolbar.html' with title=desired_translation.title|urlencode url=request.build_absolute_uri|urlencode only %}	
        <hr class="print-hide" />
        <div class="section print-hide">
            <div class="ui two column stackable grid">
            {% for related_article in related %}
            <div class="column">
            {% include 'article_thumb.html' with article=related_article only %}
            </div>
            {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}
        {% if False %}
        <hr />
        <div class="section">
            <h3 class="section-header">Å tevilka</h3>
            <div class="ui center aligned basic segment">
                <h2>
                    From
                    <a href="{{ article.issue.get_absolute_url }}">
                        {{ article.issue.title }} (issue #{{ article.issue.number }})
                    </a>
                </h2>
            </div>
        </div>
        {% endif %}
    </div>
</article>
{% endblock %}