{% extends "base.html" %}
{% from "components/social_share.html" import share_buttons %}
{% block styles %}
<style>
  /* Estilos locales y seguros para la imagen destacada del detalle de artículo */
  .featured-image {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem; /* borde redondeado consistente */
    background-color: #f8f9fa; /* fondo claro si hay retraso en carga */
  }
  .featured-image img {
    width: 100%;
    height: auto; /* móvil: respetar proporción natural */
    display: block;
  }
  /* En pantallas >= SM recortamos suavemente para evitar imágenes demasiado altas */
  @media (min-width: 576px) {
    .featured-image img {
      height: 340px;
      object-fit: cover; /* recorte elegante */
    }
  }
  /* En pantallas >= LG incrementamos la altura para mejor presencia visual */
  @media (min-width: 992px) {
    .featured-image img {
      height: 420px;
    }
  }
  /* Espacio adicional en escritorio para separar del menú fijo */
  .desktop-spacing { height: 100px; }
  @media (max-width: 991.98px) { .desktop-spacing { height: 0; } }

  /* Tipografía y espaciados del contenido, alineado a la vista previa */
  .article-meta { color: #6c757d; font-size: 0.9rem; }
  .article-content { line-height: 1.8; font-size: 1.1rem; }
  .article-content h2 { margin-top: 2rem; margin-bottom: 1rem; font-weight: 600; }
  .article-content img { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: 0.25rem; }
</style>
{% endblock %}

{% 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>
        
        <div class="article-meta">
            <span class="date"><i class="far fa-calendar me-1"></i>
                {% if article.published_at %}
                    {{ article.published_at }}
                {% else %}
                    {{ article.created_at }}
                {% endif %}
            </span>
            {% if article.is_published %}
                <span class="badge bg-success ms-3">Publicado</span>
            {% else %}
                <span class="badge bg-secondary ms-3">Borrador</span>
            {% endif %}
        </div>
        
        <!-- 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="{{ url_for('uploaded_file', filename=article.featured_image|replace('/static/uploads/', '')|replace('static/uploads/', '')|replace('/uploads/', '')|replace('uploads/', '')) }}" alt="{{ article.title }}" class="img-fluid rounded">
            </div>
            {% endif %}
            
            {% if article.summary %}
            <div class="article-summary mb-4">
                <div class="card bg-light">
                    <div class="card-body">
                        <strong>Resumen:</strong> {{ article.summary }}
                    </div>
                </div>
            </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 %}