{% extends 'base.html' %}

{% block title %}
    Home Page
{% endblock %}

{% block header %}
    <h1>Welcome to Picture Puzzle remake web!</h1>
{% endblock %}

{% block content %}
    <section class="simple-text">
        <p>Welcome to 'Picture Puzzle remake' website! Here you can see all game updates, articles, and more. If you want to download the latest version of game, just click on that bird on top <i class="fa-solid fa-feather"></i></p></br>
    </section>

    <section class="featured-posts">
        <h2>Featured Posts</h2>
        <div class="featured-posts-container">
            <div class="featured-post">
                <a href="{{ url_for('post', alias='update-1-1') }}">
                    <img src="{{ url_for('static', filename='images/skeleton.png') }}" alt="Featured Post">
                    <h3>Game 'Picture Puzzle remake' update 1.1</h3>
                </a>
            </div>
            <div class="featured-post">
                <a href="{{ url_for('post', alias='how-it-was-made') }}">
                    <img src="{{ url_for('static', filename='images/coding.png') }}" alt="Another Featured Post">
                    <h3>How the 'Picture Puzzle remake' was made</h3>
                </a>
            </div>
            <div class="featured-post">
                <a href="{{ url_for('post', alias='history') }}">
                    <img src="{{ url_for('static', filename='images/picture-puzzle.png') }}" alt="Another Featured Post">
                    <h3>Picture Puzzle history</h3>
                </a>
            </div>
        </div>
    </section>

    <section class="latest-posts">
        <h2>Latest Posts</h2>
        <div class="latest-posts-container">
            {% for post in latest_posts[:3] %}
                <div class="latest-post">
                    <a href="{{ url_for('post', alias=post.alias) }}">
                        <img src="{{ url_for('static', filename='images/' + post.image) }}" alt="{{ post.title }}">
                        <h3>{{ post.title }}</h3>
                    </a>
                </div>
            {% endfor %}
        </div>
    </section>
    
    <section class="trending-topics">
    </br></br><h2>Main Topics</h2>
        <div class="topics">
            <i class="far fa-comment fa-lg"></i><a href="#"> Instalation</a></br>
            <i class="far fa-comment fa-lg"></i><a href="#"> How to play</a></br>
            <i class="far fa-comment fa-lg"></i><a href="#"> Game settings</a></br>
            <i class="far fa-comment fa-lg"></i><a href="#"> Export/import</a></br></br></br>
        </div>
    </section>

    <section class="interactive-elements">
        <h2>Subscribe to game updates</h2>
        <input type="text" placeholder="Enter your email">
        <button>Submit</button></br></br>
    </section>
{% endblock %}