{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo; <a href="{{ dashboard_url }}">Prolin</a>
  &rsaquo; Redes sociales
</div>
{% endblock %}

{% block content %}
<style>
  .prolin-share { max-width: 960px; }
  .prolin-share h1 { margin-top: 0; }
  .fmt-grid, .net-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 1.5rem;
  }
  .fmt-card, .net-card {
    border: 1px solid var(--hairline-color, #ddd);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    background: var(--body-bg, #fff);
  }
  .fmt-card h3, .net-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
  .fmt-card p, .net-card p { margin: 0 0 0.75rem; color: #64748b; font-size: 0.85rem; }
  .caption-box {
    width: 100%;
    min-height: 120px;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--hairline-color, #ddd);
  }
  .net-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
</style>

<div class="prolin-share">
  <h1>Exportar a redes sociales</h1>
  <p>Descarga el formato de imagen adecuado y copia el caption de cada red. Proyecto: <strong>{{ pack.project }}</strong> · {{ pack.stack }}</p>

  <h2>Formatos</h2>
  <div class="fmt-grid">
    {% for fmt in pack.formats %}
    <div class="fmt-card">
      <h3>{{ fmt.label }}</h3>
      <p>{{ fmt.hint }}<br>{{ fmt.width }}×{{ fmt.height }}</p>
      <a class="button" href="{{ fmt.download_url }}">Descargar PNG</a>
    </div>
    {% endfor %}
  </div>

  <h2>Redes</h2>
  <div class="net-grid">
    {% for net in pack.networks %}
    <div class="net-card">
      <h3>{{ net.label }}</h3>
      <p>{{ net.blurb }}</p>
      <div class="net-actions">
        <a class="button" href="{{ net.preferred_download }}">Imagen</a>
        {% if net.intent_url %}
        <a class="button default" href="{{ net.intent_url }}" target="_blank" rel="noopener">Abrir</a>
        {% endif %}
      </div>
      <details style="margin-top:.75rem;">
        <summary>Ver caption</summary>
        <textarea class="caption-box" readonly rows="5">{{ net.caption }}</textarea>
      </details>
    </div>
    {% endfor %}
  </div>

  <p><a class="button" href="{{ dashboard_url }}">Volver al panel</a></p>
</div>
{% endblock %}