{% extends "base.html" %}

{% block title %}{{ object.title }} — Article{% endblock %}

{% block content %}
{# Header Card #}
<div class="row">
  <div class="col-12 mb-4">
    <div class="card">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h5 class="font-weight-bolder mb-1">{{ object.title }}</h5>
            <p class="text-sm text-secondary mb-0">
              /{{ object.slug }}
              {% if object.author_name %} · By {{ object.author_name }}{% endif %}
              {% if object.published_at %} · {{ object.published_at }}{% endif %}
            </p>
          </div>
          <div class="d-flex align-items-center gap-2">
            {% if object.status == 'published' %}
            <span class="badge bg-gradient-success">Published</span>
            {% elif object.status == 'archived' %}
            <span class="badge bg-gradient-secondary">Archived</span>
            {% else %}
            <span class="badge bg-gradient-warning">Draft</span>
            {% endif %}
          </div>
        </div>
        <div class="mt-3">
          <a href="{% url 'erp-article-edit' object.pk %}" class="btn bg-gradient-dark btn-sm me-2">
            <i class="fas fa-edit me-1"></i> Edit
          </a>
          {% if object.status == 'published' and storefront_url %}
          <a href="{{ storefront_url }}/blog/{{ object.slug }}" target="_blank" rel="noopener" class="btn btn-outline-info btn-sm me-2">
            <i class="fas fa-external-link-alt me-1"></i> View on site
          </a>
          {% endif %}
          <a href="{% url 'erp-article-list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Back to List
          </a>
          <form method="post" action="{% url 'erp-article-delete' object.pk %}" class="d-inline float-end" onsubmit="return confirm('Delete this article? This also removes it from the storefront blog.')">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-danger btn-sm">
              <i class="fas fa-trash me-1"></i> Delete
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{% if object.featured_image_url or object.tags %}
<div class="card mb-4">
  <div class="card-body p-4">
    {% if object.featured_image_url %}
    <p class="text-xs text-uppercase text-secondary font-weight-bolder mb-1">Featured image</p>
    <p class="text-sm text-secondary mb-3" style="word-break:break-all">{{ object.featured_image_url }}</p>
    {% endif %}
    {% if object.tags %}
    <p class="text-xs text-uppercase text-secondary font-weight-bolder mb-1">Tags</p>
    {% for tag in object.tags %}
    <span class="badge bg-gradient-dark me-1 mb-1">{{ tag }}</span>
    {% endfor %}
    {% endif %}
  </div>
</div>
{% endif %}

{% if object.excerpt %}
<div class="card mb-4">
  <div class="card-header pb-0"><h6>Excerpt</h6></div>
  <div class="card-body pt-2">
    <p class="text-sm mb-0">{{ object.excerpt }}</p>
  </div>
</div>
{% endif %}

{# Rendered body #}
<div class="card mb-4">
  <div class="card-header pb-0"><h6>Content</h6></div>
  <div class="card-body pt-2 product-description">
    {{ object.content|safe }}
  </div>
</div>

{# SEO #}
<div class="card">
  <div class="card-header pb-0"><h6>SEO</h6></div>
  <div class="card-body pt-2">
    <p class="text-sm mb-1"><span class="text-secondary">Title:</span> {{ object.seo_title|default:"—" }}</p>
    <p class="text-sm mb-1"><span class="text-secondary">Description:</span> {{ object.seo_meta_description|default:"—" }}</p>
    <p class="text-sm mb-0"><span class="text-secondary">Keywords:</span> {{ object.meta_keywords|default:"—" }}</p>
  </div>
</div>
{% endblock %}