{% extends 'layout.html' %}
{% load post_helpers %}
{% load static %}
{% block content %}


<div class="grid-x small-padding-left-1">
    <div class="medium-8 small cell" style="background: grey"> 
        {% with post=featured_post %}
        <a href="{{ post.url }}">
        <div class="news-hero-large"style="background-image: url('{{ post.imageurl }}');)">
            <div class="news-hero-text">
                <hr>
                <div class="article-date">
                    {% if post.post_type != 'N' %}
                        <p>{{ post.event_start|date:"d. F Y" }}</p>
                    {% else %}
                        <p>{{ post.public_date|date:"d. F Y" }}</p>
                    {% endif %}
                </div>
                <div class="article-title">
                    <h1>{{ post.title|safe }}</h1>
                    <p>{{ post.subtitle|default_if_none:"&nbsp;"|safe }}</p>
                </div>
            </div>
        </div>
        </a>
        {% endwith %}
    </div>

    <div class="cell medium-4 responsive-side-box">

        <div class="article-row-section">
            <div class="article-row-section-inner">

                <h1 class="article-row-section-header">Events</h1>

                {% with post=featured_event %}
                    {% include 'posts/partials/_article_row.html' %}
                {% endwith %}
                {% for post in featured_meeting %}
                    {% include 'posts/partials/_meeting_row.html' %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div class="grid-container">
    <div class="grid-x grid-padding-x padding-top-1 padding-left-1 padding-right-1">
        {{ tags_list|tags_to_url }} 
    </div>

    <div class="grid-x grid-x-padding">
        <div class="large-8 medium-7 small-12 small-order-2 medium-order-1">
            {% for post in posts %}
            {% include 'posts/partials/_posts_hero.html' %}
            {% endfor %}
        </div>

        <div class="large-4 medium-5 small-12 small-order-1 medium-order-1 padding-top-1 large-padding-left-1 medium-padding-left-1">

            <a href="mailto:service@fet.at">
                <div class="social-media-box">
                    <span class="social-media-badge badge">
                        <span class="social-media-badge-symbol">
                        <i class="fa-solid fa-envelope"></i>
                        </span>
                    </span>

                    <span class="social-media-text">Schreib uns ein Mail :)</span>
                </div>
            </a>
            <a href="{% url 'discord' %}">
                <div class="social-media-box">
                    <span class="social-media-badge badge">
                        <span class="social-media-badge-symbol">
                        <i class="fa-brands fa-discord"></i>
                        </span>
                    </span>
                    <span class="social-media-text">Komm auf unseren Discord-Server!</span>
                </div>
            </a>

            {% for post in events %}
                {% include 'posts/partials/_date_box.html' %}
            {% endfor %}

            <a href="{% url 'posts:posts.calendar' %}">
                <div class="social-media-box">
                    <span class="social-media-badge badge">
                        <span class="social-media-badge-symbol">
                        <i class="fa-regular fa-calendar"></i>
                        </span>
                    </span>
                    <span class="social-media-text">FET-Ka­len­der abonnieren</span>
                </div>
            </a>
        </div>

    </div>

    <a class="button" href="{% url 'posts:posts.index' %}" style="background: gray">Mehr anzeigen</a>

</div>

{% endblock %}
