{% extends "base.html" %}

{% block title %}Featured Articles - The Orchid Continuum{% endblock %}

{% block content %}
<style>
        body {
            background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
            color: #e6ddd4;
            min-height: 100vh;
        }
        .article-hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/static/orchid-background.jpg');
            background-size: cover;
            background-position: center;
            padding: 120px 0;
            text-align: center;
            border-bottom: 3px solid #d4af37;
        }
        .article-card {
            background: linear-gradient(145deg, #3a2817 0%, #2a1f14 100%);
            border: 1px solid #6b5b47;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(212,175,55,0.2);
            border-color: #d4af37;
        }
        .article-title {
            color: #d4af37;
            margin-bottom: 1rem;
            font-size: 1.8rem;
            font-weight: 600;
        }
        .article-meta {
            color: #b8a690;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .article-excerpt {
            color: #e6ddd4;
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }
        .read-more-btn {
            background: linear-gradient(45deg, #d4af37, #b8941f);
            border: none;
            color: #1a0f0a;
            padding: 0.75rem 2rem;
            border-radius: 25px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }
        .read-more-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(212,175,55,0.3);
            color: #1a0f0a;
        }
        .coming-soon {
            opacity: 0.7;
            position: relative;
        }
        .coming-soon::after {
            content: "Coming Soon";
            position: absolute;
            top: 20px;
            right: 20px;
            background: #b8941f;
            color: #1a0f0a;
            padding: 0.5rem 1rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .category-badge {
            background: rgba(212,175,55,0.2);
            color: #d4af37;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.8rem;
            border: 1px solid rgba(212,175,55,0.3);
        }
    </style>
    <div class="article-hero">
        <div class="container">
            <!-- Breadcrumb Navigation -->
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb justify-content-center" style="background: none; margin-bottom: 1rem;">
                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}" class="text-light" style="color: #d4af37 !important;">🏠 Home</a></li>
                    <li class="breadcrumb-item active text-light" aria-current="page">Articles</li>
                </ol>
            </nav>
            <h1 class="display-3 mb-4">Featured Articles</h1>
            <p class="lead">Exploring the fascinating intersection of botany, history, mythology, and future possibilities</p>
        </div>
    </div>

    <div class="container my-5">
        {% for slug, article in articles.items() %}
        <div class="article-card">
            <div class="article-meta">
                <span class="category-badge">{{ article.category }}</span>
                <span><i data-feather="calendar"></i> Published</span>
                <span><i data-feather="clock"></i> {{ article.read_time }}</span>
            </div>
            <h2 class="article-title">{{ article.title }}</h2>
            <div class="article-excerpt">
                {{ article.excerpt }}
            </div>
            <a href="{{ url_for('display_article', article_slug=slug) }}" class="read-more-btn">
                <i data-feather="book-open"></i> Read Full Article
            </a>
        </div>
        {% endfor %}

        <div class="text-center mt-5">
            <a href="{{ url_for('index') }}" class="btn btn-outline-light">
                <i data-feather="arrow-left"></i> Back to Home
            </a>
        </div>
    </div>

{% endblock %}