{% extends 'layouts/main.django' %}
{% block content %}
  <div class="edit-post">
    <div class="edit-main">
      {% if Post.Title %}
        <h1 class="post-title">{{ Post.Title }}</h1>
      {% else %}
        <h1 class="post-title">Post #{{ Post.ID }}</h1>
      {% endif %}
      <form action="/posts/{{ Post.ID }}/edit" method="post" class="ibform">
        {% if Error %}
          <div class="error">{{ Error }}</div>
        {% endif %}
        <div class="fgroup">
          <div class="fg-main">
            <label for="title">Title</label>
          </div>
          <div class="fg-sub">
            <input type="text" class="itext" id="title" name="title" value="{{ Post.Title }}" placeholder="e.g., My Awesome Post" />
            <small>Optional title for the post. If left empty, the post will be titled "Post #{{ Post.ID }}".</small>
          </div>
        </div>
        <div class="fgroup">
          <div class="fg-main">
            <label for="description">Description</label>
          </div>
          <div class="fg-sub">
            <textarea id="description" name="description" class="itextarea" placeholder="Describe your post here..." rows="6">{{ Post.Description }}</textarea>
            <small>Optional description for the post. This can be used to provide more context or details about the content of the post. <a href="/help/syntax" target="_blank">Learn more about syntax</a>.</small>
          </div>
        </div>
        <div class="fgroup">
          <div class="fg-main">
            <label for="source_url">SourceURL</label>
          </div>
          <div class="fg-sub">
            <input type="url" class="itext" id="source_url" name="source_url" value="{{ Post.SourceURL }}" placeholder="https://example.com/source" />
          </div>
        </div>
        <div class="fgroup">
          <div class="fg-main">
            <label>Rating</label>
          </div>
          <div class="fg-sub-radio">
            {% if 'Safe' in Post.Rating %}
              <input type="radio" id="rating-safe" name="rating" value="Safe" checked />
            {% else %}
              <input type="radio" id="rating-safe" name="rating" value="Safe" />
            {% endif %}
            <label for="rating-safe">Safe</label>
            {% if 'Sensitive' in Post.Rating %}
              <input type="radio" id="rating-sensitive" name="rating" value="Sensitive" checked />
            {% else %}
              <input type="radio" id="rating-sensitive" name="rating" value="Sensitive" />
            {% endif %}
            <label for="rating-sensitive">Sensitive</label>
            {% if 'Questionable' in Post.Rating %}
              <input type="radio" id="rating-questionable" name="rating" value="Questionable" checked />
            {% else %}
              <input type="radio" id="rating-questionable" name="rating" value="Questionable" />
            {% endif %}
            <label for="rating-questionable">Questionable</label>
            {% if 'Explicit' in Post.Rating %}
              <input type="radio" id="rating-explicit" name="rating" value="Explicit" checked />
            {% else %}
              <input type="radio" id="rating-explicit" name="rating" value="Explicit" />
            {% endif %}
            <label for="rating-explicit">Explicit</label>
          </div>
        </div>
        {% if User.CanApprovePosts %}
          <div class="fgroup">
            <div class="fg-main">
              <label for="is_approved">Is Approved</label>
            </div>
            <div class="fg-sub-radio">
              {% if Post.IsApproved %}
                <input type="checkbox" id="is_approved" name="is_approved" value="1" checked="checked" />
              {% else %}
                <input type="checkbox" id="is_approved" name="is_approved" value="1" />
              {% endif %}
              <label for="is_approved"><small>Mark this post as approved. Approved posts won't be deleted after 3 days.</small></label>
            </div>
          </div>
        {% endif %}
        {% if User.CanDeletePosts %}
          <div class="fgroup">
            <div class="fg-main">
              <label for="is_deleted">Is Deleted</label>
            </div>
            <div class="fg-sub-radio">
              {% if Post.IsDeleted %}
                <input type="checkbox" id="is_deleted" name="is_deleted" value="1" checked="checked" />
              {% else %}
                <input type="checkbox" id="is_deleted" name="is_deleted" value="1" />
              {% endif %}
              <label for="is_deleted"><small>Mark this post as deleted. Deleted posts are hidden from public view.</small></label>
            </div>
          </div>
        {% endif %}
        {% if User.IsAdmin %}
          <div class="fgroup">
            <div class="fg-main">
              <label for="uploader">Uploader</label>
            </div>
            <div class="fg-sub">
              <select id="uploader" name="uploader">
                {% for u in Users %}
                  {% if u.ID == Post.UploaderID %}
                    <option value="{{ u.ID }}" selected>{{ u.Username }}</option>
                  {% else %}
                    <option value="{{ u.ID }}">{{ u.Username }}</option>
                  {% endif %}
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="fgroup">
            <div class="fg-main">
              <label for="approver">Approver</label>
            </div>
            <div class="fg-sub">
              <select id="approver" name="approver">
                {% if not Post.ApproverID %}
                  <option value="0" selected>---</option>
                {% else %}
                  <option value="0">---</option>
                {% endif %}
                {% for a in Approvers %}
                  {% if a.ID == Post.ApproverID %}
                    <option value="{{ a.ID }}" selected>{{ a.Username }}</option>
                  {% else %}
                    <option value="{{ a.ID }}">{{ a.Username }}</option>
                  {% endif %}
                {% endfor %}
              </select>
            </div>
          </div>
        {% endif %}
        <input type="hidden" name="next" value="{{ Request.Path }}" />
        <input type="submit" value="Save Changes" style="margin-top: 8px;" />
      </form>

      <div class="tag-editor">
        <h1 class="tag-editor-title">✦ Tags ✦</h1>

        <div class="tag-category" data-type="general">
          <div class="tag-category-header">
            <h3 class="tag-category-title">
              <span class="tag-type-icon">General</span>
              <span class="tag-count">({{ PostTags.general|length }})</span>
            </h3>
          </div>

          <div class="tag-list" id="tag-list-general">
            {% for tag in PostTags.general %}
              <div class="tag-item" data-tag-id="{{ tag.ID }}">
                <a href="/tags/{{ tag.Name }}" class="tag-link" style="color: {{ tag.Type.Color }};">{{ tag.Name }}</a>
                {% if tag.Parent %}
                  <span class="tag-parent-indicator" title="Child of {{ tag.Parent.Name }}">⬆</span>
                {% endif %}
                {% if tag.Children %}
                  <span class="tag-children-indicator" title="Has {{ tag.Children|length }} children">⬇</span>
                {% endif %}
                <button type="button" class="tag-remove-btn" data-tag-id="{{ tag.ID }}" title="Remove tag">×</button>
              </div>
            {% empty %}
              <div class="no-tags">No general tags</div>
            {% endfor %}
          </div>

          <div class="tag-input-container">
            <div class="tag-input-wrapper">
              <input type="text" class="tag-input" data-type="general" placeholder="Add general tag..." autocomplete="off" />
              <div class="tag-suggestions" id="suggestions-general"></div>
            </div>
          </div>
        </div>

        <div class="tag-category" data-type="artist">
          <div class="tag-category-header">
            <h3 class="tag-category-title">
              <span class="tag-type-icon">Artist</span>
              <span class="tag-count">({{ PostTags.artist|length }})</span>
            </h3>
          </div>

          <div class="tag-list" id="tag-list-artist">
            {% for tag in PostTags.artist %}
              <div class="tag-item" data-tag-id="{{ tag.ID }}">
                <a href="/tags/{{ tag.Name }}" class="tag-link" style="color: {{ tag.Type.Color }};">{{ tag.Name }}</a>
                {% if tag.Parent %}
                  <span class="tag-parent-indicator" title="Child of {{ tag.Parent.Name }}">⬆</span>
                {% endif %}
                {% if tag.Children %}
                  <span class="tag-children-indicator" title="Has {{ tag.Children|length }} children">⬇</span>
                {% endif %}
                <button type="button" class="tag-remove-btn" data-tag-id="{{ tag.ID }}" title="Remove tag">×</button>
              </div>
            {% empty %}
              <div class="no-tags">No artist tags</div>
            {% endfor %}
          </div>

          <div class="tag-input-container">
            <div class="tag-input-wrapper">
              <input type="text" class="tag-input" data-type="artist" placeholder="Add artist tag..." autocomplete="off" />
              <div class="tag-suggestions" id="suggestions-artist"></div>
            </div>
          </div>
        </div>

        <div class="tag-category" data-type="character">
          <div class="tag-category-header">
            <h3 class="tag-category-title">
              <span class="tag-type-icon">Character</span>
              <span class="tag-count">({{ PostTags.character|length }})</span>
            </h3>
          </div>

          <div class="tag-list" id="tag-list-character">
            {% for tag in PostTags.character %}
              <div class="tag-item" data-tag-id="{{ tag.ID }}">
                <a href="/tags/{{ tag.Name }}" class="tag-link" style="color: {{ tag.Type.Color }};">{{ tag.Name }}</a>
                {% if tag.Parent %}
                  <span class="tag-parent-indicator" title="Child of {{ tag.Parent.Name }}">⬆</span>
                {% endif %}
                {% if tag.Children %}
                  <span class="tag-children-indicator" title="Has {{ tag.Children|length }} children">⬇</span>
                {% endif %}
                <button type="button" class="tag-remove-btn" data-tag-id="{{ tag.ID }}" title="Remove tag">×</button>
              </div>
            {% empty %}
              <div class="no-tags">No character tags</div>
            {% endfor %}
          </div>

          <div class="tag-input-container">
            <div class="tag-input-wrapper">
              <input type="text" class="tag-input" data-type="character" placeholder="Add character tag..." autocomplete="off" />
              <div class="tag-suggestions" id="suggestions-character"></div>
            </div>
          </div>
        </div>

        <div class="tag-category" data-type="copyright">
          <div class="tag-category-header">
            <h3 class="tag-category-title">
              <span class="tag-type-icon">Copyright</span>
              <span class="tag-count">({{ PostTags.copyright|length }})</span>
            </h3>
          </div>

          <div class="tag-list" id="tag-list-copyright">
            {% for tag in PostTags.copyright %}
              <div class="tag-item" data-tag-id="{{ tag.ID }}">
                <a href="/tags/{{ tag.Name }}" class="tag-link" style="color: {{ tag.Type.Color }};">{{ tag.Name }}</a>
                {% if tag.Parent %}
                  <span class="tag-parent-indicator" title="Child of {{ tag.Parent.Name }}">⬆</span>
                {% endif %}
                {% if tag.Children %}
                  <span class="tag-children-indicator" title="Has {{ tag.Children|length }} children">⬇</span>
                {% endif %}
                <button type="button" class="tag-remove-btn" data-tag-id="{{ tag.ID }}" title="Remove tag">×</button>
              </div>
            {% empty %}
              <div class="no-tags">No copyright tags</div>
            {% endfor %}
          </div>

          <div class="tag-input-container">
            <div class="tag-input-wrapper">
              <input type="text" class="tag-input" data-type="copyright" placeholder="Add copyright tag..." autocomplete="off" />
              <div class="tag-suggestions" id="suggestions-copyright"></div>
            </div>
          </div>
        </div>

        <div class="tag-category" data-type="meta">
          <div class="tag-category-header">
            <h3 class="tag-category-title">
              <span class="tag-type-icon">Meta</span>
              <span class="tag-count">({{ PostTags.meta|length }})</span>
            </h3>
          </div>

          <div class="tag-list" id="tag-list-meta">
            {% for tag in PostTags.meta %}
              <div class="tag-item" data-tag-id="{{ tag.ID }}">
                <a href="/tags/{{ tag.Name }}" class="tag-link" style="color: {{ tag.Type.Color }};">{{ tag.Name }}</a>
                {% if tag.Parent %}
                  <span class="tag-parent-indicator" title="Child of {{ tag.Parent.Name }}">⬆</span>
                {% endif %}
                {% if tag.Children %}
                  <span class="tag-children-indicator" title="Has {{ tag.Children|length }} children">⬇</span>
                {% endif %}
                <button type="button" class="tag-remove-btn" data-tag-id="{{ tag.ID }}" title="Remove tag">×</button>
              </div>
            {% empty %}
              <div class="no-tags">No meta tags</div>
            {% endfor %}
          </div>

          <div class="tag-input-container">
            <div class="tag-input-wrapper">
              <input type="text" class="tag-input" data-type="meta" placeholder="Add meta tag..." autocomplete="off" />
              <div class="tag-suggestions" id="suggestions-meta"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="edit-sidebar">
      <img src="{{ CDNURL }}/thumbnail/{{ Post.FileName }}" alt="{{ Post.Title }}" width="{{ Post.Sizes.1.Width }}" height="{{ Post.Sizes.1.Height }}" />
      <div class="post-detail-item">
        <span class="post-detail-label">ID:</span>
        <span class="post-detail-value">{{ Post.ID }}</span>
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">Uploader:</span>
        <span class="post-detail-value"><a href="/u/{{ Post.Uploader.Username }}">{{ Post.Uploader.Username }}</a></span>
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">Approver:</span>
        {% if Post.Approver.ID %}
          <span class="post-detail-value"><a href="/u/{{ Post.Approver.Username }}">{{ Post.Approver.Username }}</a></span>
        {% else %}
          {% if Post.IsApproved %}
            <span class="post-detail-value">N/A</span>
          {% else %}
            <span class="post-detail-value">Not Approved</span>
          {% endif %}
        {% endif %}
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">Filename:</span>
        <span class="post-detail-value">{{ Post.FileName }}</span>
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">Type:</span>
        <span class="post-detail-value">{{ Post.ContentType }}</span>
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">MD5:</span>
        <span class="post-detail-value">{{ Post.MD5Hash }}</span>
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">ViewCount:</span>
        <span class="post-detail-value">{{ Post.ViewCount }}</span>
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">Favourites:</span>
        <span class="post-detail-value post-favourite-actions">{{ Post.FavouriteCount }}</span>
      </div>
      <div class="post-detail-item">
        <span class="post-detail-label">Comments:</span>
        <span class="post-detail-value">{{ Post.CommentCount }}</span>
      </div>
    </div>
  </div>
{% endblock %}
{% block scripts %}
  <script type="text/javascript" src="/static/scripts/tagEditor.js"></script>
{% endblock %}