{% extends "base.html" %}

{% block title %} OurTieba {% endblock %}

{% block page_content %}

    <div class="page-header">
        <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
            <div class="col-md-6 px-0">
                <h1 class="display-4 fst-italic">{{ data['news'][0]['title'] }}</h1>
                <p class="lead my-3">{{ data['news'][0]['abstract'] }}</p>
                <p class="lead mb-0"><a href="{{ data['news'][0]['link'] }}" target="_blank"
                                        class="text-white fw-bold">Continue
                    reading...</a></p>
            </div>
        </div>
    </div>
    <div class="row mb-2">
        {% for news in data['news'][1:] %}
            <div class="col-md-6">
                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 flex-column position-static">
                        <h3 class="mb-0">{{ news['title'] }}</h3>
                        <p class="card-text mb-auto">{{ news['abstract'] }}</p>
                        <a href="{{ news['link'] }}" target="_blank" class="stretched-link">Continue reading</a>
                    </div>
                    <div class="col-auto d-none d-lg-block">
                        <img src="{{ news['img_src'] or "data:image/gif;base64,iVBORw0KGgo" +
                        "AAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="}}"
                             alt="" height="100%" width="200"
                             style="object-fit: cover; object-position: center">

                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <br>
    <div class="display-4">Hot Boards</div>
    <hr>

    {% for board in data['boards'] %}
        <article class="post">
            <header>
                <div>
                    <a href="/board/{{ board['Bid'] }}" class="text-decoration-none display-6">{{ board['name'] }}</a>
                    <div class="accordion-body">Hot: {{ board['hot'] }}</div>
                    <div class="accordion-body">Post count: {{ board['post_count'] }}</div>

                </div>
            </header>
            <p class="body">{{ board['summary'] }}</p>
        </article>
        {% if not loop.last %}
            <hr>
        {% endif %}
    {% endfor %}

{% endblock %}
