{% extends "base.html" %}
{% from "components/social_share.html" import share_buttons %}
{% block content %}
<div class="container">
    <!-- Añadir espacio adicional en modo escritorio -->
    <div class="desktop-spacing d-none d-lg-block" style="height: 100px;"></div>
    <div class="page-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('blog.list_articles') }}">Blog</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
            </ol>
        </nav>
        <h1>{{ article.title }}</h1>
        
        <p class="post-meta text-muted">
            {% if article.published_at %}
                <small>Publicado el {{ article.published_at }}</small>
            {% else %}
                <small>Creado el {{ article.created_at }}</small>
            {% endif %}
        </p>
        
        <!-- Botones de compartir -->
        {{ share_buttons(request.url, article.title, article.summary) }}
    </div>
    
    <div class="row">
        <div class="col-lg-10 col-md-12 mx-auto">
            {% if article.featured_image %}
            <div class="featured-image mb-4">
                <img src="{{ '/uploads/' + article.featured_image }}" alt="{{ article.title }}" class="img-fluid rounded">
            </div>
            {% endif %}
            
            {% if article.summary %}
            <div class="article-summary">
                <p class="lead">{{ article.summary }}</p>
                <hr class="my-4">
            </div>
            {% endif %}
            
            <div class="article-content">
                {{ article.content|safe }}
            </div>
            
            <div class="mt-5">
                <a href="{{ url_for('blog.list_articles') }}" class="btn btn-primary">&larr; Volver al blog</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}