{% extends "base.html" %}
{% load static %}

{% block headtitle %}完善并发布作品 - {{PORTAL_NAME}}{% endblock headtitle %}

{% block extra_head %}
<style>
  .creator-studio { max-width: 1120px; margin: 0 auto; padding: 28px 22px 56px; }
  .creator-studio__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
  .creator-studio__header h1 { font-size: 28px; margin: 0 0 7px; }
  .creator-studio__header p { color: #69717d; margin: 0; }
  .creator-studio__status { background: #fff4ec; border: 1px solid #ffcab0; border-radius: 999px; color: #e95f28; font-weight: 700; padding: 8px 14px; white-space: nowrap; }
  .creator-studio__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 24px; }
  .creator-studio__card { background: #fff; border: 1px solid #e7e9ee; border-radius: 14px; box-shadow: 0 8px 30px rgba(28, 37, 54, .07); padding: 20px; }
  .creator-studio__card h2 { font-size: 19px; margin: 0 0 16px; }
  .creator-preview { align-items: center; background: #17191d; border-radius: 10px; display: flex; justify-content: center; min-height: 340px; overflow: hidden; }
  .creator-preview video, .creator-preview img { display: block; max-height: 620px; max-width: 100%; width: 100%; }
  .creator-preview audio { margin: 80px 24px; width: calc(100% - 48px); }
  .creator-preview a { color: #fff; font-weight: 700; }
  .creator-studio__file { color: #69717d; font-size: 13px; margin: 12px 0 0; overflow-wrap: anywhere; }
  .creator-field { margin-bottom: 20px; }
  .creator-field label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  .creator-field input { border: 1px solid #cfd4dc; border-radius: 8px; font-size: 16px; min-height: 48px; padding: 10px 12px; width: 100%; }
  .creator-field input:focus { border-color: #ff6b35; box-shadow: 0 0 0 3px rgba(255, 107, 53, .15); outline: 0; }
  .creator-field__help { color: #69717d; display: block; font-size: 13px; margin-top: 6px; }
  .creator-errors { background: #fff0f0; border: 1px solid #f1b4b4; border-radius: 8px; color: #a62424; margin-bottom: 18px; padding: 12px 14px; }
  .creator-actions { display: grid; gap: 10px; margin-top: 8px; }
  .creator-actions button, .creator-actions a { align-items: center; border-radius: 8px; display: inline-flex; font-size: 16px; font-weight: 800; justify-content: center; min-height: 48px; padding: 10px 16px; text-decoration: none; }
  .creator-actions__publish { background: #ff6b35; border: 1px solid #ff6b35; color: #fff; }
  .creator-actions__save { background: #fff; border: 1px solid #ff6b35; color: #e95f28; }
  .creator-actions__delete { background: #fff; border: 1px solid #d7dbe2; color: #b42318; }
  .creator-actions__back { color: #596273; }
  .creator-review-note { background: #f7f8fa; border-radius: 8px; color: #596273; font-size: 13px; line-height: 1.65; margin-top: 16px; padding: 12px 14px; }
  @media (max-width: 860px) {
    .creator-studio { padding: 18px 14px 44px; }
    .creator-studio__grid { grid-template-columns: 1fr; }
    .creator-preview { min-height: 220px; }
  }
</style>
{% endblock extra_head %}

{% block innercontent %}
<main class="creator-studio" data-creator-studio>
  <header class="creator-studio__header">
    <div>
      <h1>预览并发布作品</h1>
      <p>先确认视频，再填写标题和话题。内容不会在你点击“发布作品”前公开。</p>
    </div>
    <span class="creator-studio__status">
      {% if media_object.listable and media_object.is_reviewed %}已发布{% elif pending_review %}等待审核{% else %}草稿{% endif %}
    </span>
  </header>

  <div class="creator-studio__grid">
    <section class="creator-studio__card" aria-labelledby="preview-heading">
      <h2 id="preview-heading">作品预览</h2>
      <div class="creator-preview">
        {% if media_object.media_type == "video" %}
          <video controls preload="metadata" src="{{ preview_url }}">浏览器暂不支持视频预览。</video>
        {% elif media_object.media_type == "audio" %}
          <audio controls preload="metadata" src="{{ preview_url }}">浏览器暂不支持音频预览。</audio>
        {% elif media_object.media_type == "image" %}
          <img src="{{ preview_url }}" alt="{{ media_object.title }} 的预览">
        {% else %}
          <a href="{{ preview_url }}" target="_blank" rel="noopener">打开文件预览</a>
        {% endif %}
      </div>
      <p class="creator-studio__file">已上传：{{ media_object.title }}</p>
    </section>

    <section class="creator-studio__card" aria-labelledby="details-heading">
      <h2 id="details-heading">发布信息</h2>
      {% if form.non_field_errors or form.title.errors or form.topics.errors %}
        <div class="creator-errors" role="alert">
          {{ form.non_field_errors }}{{ form.title.errors }}{{ form.topics.errors }}
        </div>
      {% endif %}
      <form method="post" data-creator-publish-form>
        {% csrf_token %}
        <div class="creator-field">
          <label for="{{ form.title.id_for_label }}">作品标题</label>
          {{ form.title }}
        </div>
        <div class="creator-field">
          <label for="{{ form.topics.id_for_label }}">话题</label>
          {{ form.topics }}
          <span class="creator-field__help">{{ form.topics.help_text }}</span>
        </div>

        <div class="creator-actions">
          <button type="submit" name="action" value="publish" class="creator-actions__publish">发布作品</button>
          <button type="submit" name="action" value="save" class="creator-actions__save">保存草稿</button>
          <button type="submit" name="action" value="delete" class="creator-actions__delete" onclick="return window.confirm('确定删除这个作品吗？删除后无法恢复。');">删除作品</button>
          <a class="creator-actions__back" href="{% url 'upload_media' %}">继续上传其他作品</a>
        </div>
      </form>
      <p class="creator-review-note">发布后作品会进入人工内容审核；审核通过后才会出现在公开片库。注册账号本身不需要审批。</p>
    </section>
  </div>
</main>
{% endblock innercontent %}