{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <h1 class="text-center mb-5" style="color: var(--dark-color);">Wellness Stories</h1>

    <div class="row">
        {% for story in stories %}
        <div class="col-md-8 offset-md-2 mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="story-author me-3">{{ story.author_avatar }}</div>
                        <h5 class="card-title mb-0">{{ story.title }}</h5>
                    </div>
                    <p class="card-text">{{ story.content|truncatewords:50 }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">{{ story.created_at|date:"F d, Y" }}</small>
                        <div>
                            <span class="me-3">-</span>
                            <span class="me-3">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<nav class="navbar fixed-bottom navbar-light bg-light">
    <div class="container-fluid d-flex justify-content-around">
        <a class="navbar-brand" href="#"><i class="fas fa-home"></i></a>
        <a class="navbar-brand" href="#"><i class="fas fa-search"></i></a>
        <a class="navbar-brand" href="#"><i class="fas fa-plus"></i></a>
        <a class="navbar-brand" href="#"><i class="fas fa-robot"></i></a>
        <a class="navbar-brand" href="#"><i class="fas fa-user"></i></a>
    </div>
</nav>
{% endblock %}

{% block extra_js %}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
{% endblock %}
