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

{% block title %}{{ article.title }}{% endblock %}
{% block meta_description %}{{ article.excerpt }}{% endblock %}
{% block meta_keywords %}{{ article.meta_keywords }}{% endblock %}

{% block content %}
<section class="section bg-primary-subtle">
    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
        <header class="section-primary__header text-center">
            <h1 class="section-h1 fs-40 fs-lg-64 mb-24">{{ article.title }}</h1>
            <div class="text-gray-300 w-lg-50 mx-auto">
                <p class="mb-3">{{ article.excerpt }}</p>
                <div class="d-flex justify-content-center align-items-center gap-3 text-sm">
                    <span>By {{ article.author.get_full_name|default:article.author.username }}</span>
                    <span>•</span>
                    <span>{{ article.created_at|date:"M d, Y" }}</span>
                    {% if article.updated_at != article.created_at %}
                    {% endif %}
                </div>
            </div>
        </header>
    </div>
</section>

{% if article.image %}
<section class="section py-0">
    <div class="container-xl mx-auto">
        <div class="article-hero-image">
            <img src="{{ article.image.url }}" alt="{{ article.title }}" class="img-fluid w-100" style="max-height: 400px; object-fit: cover;">
        </div>
    </div>
</section>
{% endif %}

<section class="section">
    <div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
        <div class="row">
            <div class="col-12 col-lg-8 mx-auto">
                <article class="article-content">
                    <div class="prose">
                        {{ article.content|safe }}
                    </div>
                </article>

                <!-- Related Links -->
                {% if article.related_service or article.related_consulting_partner or article.related_cloud_provider %}
                <div class="mt-5 pt-4 border-top">
                    <h3>Related Links</h3>
                    <div class="row">
                        {% if article.related_service %}
                        <div class="col-12 col-md-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title">Service</h5>
                                    <p class="card-text">{{ article.related_service.name }}</p>
                                    <a href="{{ article.related_service.get_absolute_url }}" class="btn btn-primary btn-sm">View Service</a>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% if article.related_consulting_partner %}
                        <div class="col-12 col-md-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title">Partner</h5>
                                    <p class="card-text">{{ article.related_consulting_partner.name }}</p>
                                    <a href="{{ article.related_consulting_partner.get_absolute_url }}" class="btn btn-primary btn-sm">View Partner</a>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% if article.related_cloud_provider %}
                        <div class="col-12 col-md-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title">Provider</h5>
                                    <p class="card-text">{{ article.related_cloud_provider.name }}</p>
                                    <a href="{{ article.related_cloud_provider.get_absolute_url }}" class="btn btn-primary btn-sm">View Provider</a>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Related Articles -->
                {% if related_articles %}
                <div class="mt-5 pt-4 border-top">
                    <h3>Related Articles</h3>
                    <div class="row">
                        {% for related_article in related_articles %}
                        <div class="col-12 col-md-4 mb-4">
                            <div class="card h-100 clickable-card" onclick="cardClicked(event, '{{ related_article.get_absolute_url }}')">
                                {% if related_article.image %}
                                <img src="{{ related_article.image.url }}" class="card-img-top" alt="{{ related_article.title }}" style="height: 200px; object-fit: cover;">
                                {% endif %}
                                <div class="card-body d-flex flex-column">
                                    <h5 class="card-title">{{ related_article.title }}</h5>
                                    <p class="card-text flex-grow-1">{{ related_article.excerpt|truncatewords:15 }}</p>
                                    <small class="text-muted">{{ related_article.created_at|date:"M d, Y" }}</small>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Navigation -->
                <div class="mt-5 pt-4 border-top">
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{% url 'services:article_list' %}" class="btn btn-outline-primary">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            Back to Articles
                        </a>
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-secondary btn-sm" onclick="window.print()">
                                <i class="bi bi-printer"></i> Print
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" onclick="navigator.share ? navigator.share({title: '{{ article.title }}', url: window.location.href}) : navigator.clipboard.writeText(window.location.href)">
                                <i class="bi bi-share"></i> Share
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section bg-primary-subtle">
    <div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
      <div class="row">
        <div class="col-12 col-lg-4 mb-30 mb-lg-0">
          <div class="section-logo mx-auto">
            <img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Sir Vala mascot">
          </div>
        </div>
        <div class="col-12 col-lg-8">
          <header class="section-primary__header">
            <h2 class="section-h1 fs-40 fs-lg-60">Questions about this article?</h2>
            <div class="section-primary__desc">
              <p>Have questions or need more information about the topics covered in this article? Get in touch with us!</p>
            </div>
            <div>
                {% embedded_contact_form source="Article Inquiry" %}
            </div>
          </header>
        </div>
      </div>
    </div>
  </section>
{% endblock %}