{% extends 'base.html' %}

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

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

{% block content %}
    <section class="text">
        <p>Welcome to Picture Puzzle remake web! Here you can see game updates, articles, and more.</p>
    </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') }}">
                    <img src="{{ url_for('static', filename='images/picture-puzzle.png') }}" alt="Featured Post" width="500" height="350">
                    <h3>Game 'Picture Puzzle remake' update 1.0</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" width="500" height="350">
                    <h3>Picture Puzzle remake - How it was made</h3>
                </a>
            </div>
        </div>
    </section>

    <section class="latest-posts">
        <h2>Latest Posts</h2>
        <div class="latest-posts-container">
            {% for post in latest_posts %}
                <div class="latest-post">
                    <a href="{{ url_for('post', alias=post.alias) }}">
                        <img src="{{ url_for('static', filename='images/' + post.image) }}" alt="{{ post.title }}" width="500" height="350">
                        <h3>{{ post.title }}</h3>
                    </a>
                </div>
            {% endfor %}
        </div>
    </section>
    
    <section class="trending-topics">
        <h2>Trending 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="#"> Known issues</a></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 %}