{% extends "admin/base.html" %}

{% block title %}New Note - StarPunk Admin{% endblock %}

{% block admin_content %}
<div class="note-editor">
  <h2>Create New Note</h2>

  <form action="{{ url_for('admin.create_note_submit') }}" method="POST" enctype="multipart/form-data" class="note-form">
    <div class="form-group">
      <label for="content">Content (Markdown)</label>
      <textarea
        id="content"
        name="content"
        rows="20"
        placeholder="Write your note in markdown..."
        required
        autofocus
      ></textarea>
      <small>Use Markdown syntax for formatting</small>
    </div>

    <div class="form-group">
      <label for="custom_slug">Custom Slug (optional)</label>
      <input type="text"
             id="custom_slug"
             name="custom_slug"
             pattern="[a-z0-9-]+"
             placeholder="leave-blank-for-auto-generation"
             class="form-control">
      <small class="form-text text-muted">
        Lowercase letters, numbers, and hyphens only.
        Leave blank to auto-generate from content.
      </small>
    </div>

    <div class="form-group">
      <label for="media_files">Images (optional, max 4)</label>
      <input type="file"
             name="media_files"
             id="media_files"
             accept="image/jpeg,image/png,image/gif,image/webp"
             multiple
             class="form-control">
      <small class="form-text text-muted">
        JPEG, PNG, GIF, WebP only. Max 10MB per file, 4 images total.
        Images will appear at the top of your note.
      </small>
    </div>

    <!-- Preview area (filled via JavaScript after file selection) -->
    <div id="media-preview" class="media-preview" style="display: none;"></div>

    <div class="form-group form-checkbox">
      <input type="checkbox" id="published" name="published" checked>
      <label for="published">Publish immediately</label>
    </div>

    <div class="form-actions">
      <button type="submit" class="button button-primary">Create Note</button>
      <a href="{{ url_for('admin.dashboard') }}" class="button button-secondary">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}

{% block head %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="{{ url_for('static', filename='js/preview.js') }}"></script>

<style>
.media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
}

.media-preview-item {
  border: 1px solid #ddd;
  padding: 0.5rem;
  border-radius: 4px;
  background: white;
}

.media-preview-item img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
  border-radius: 2px;
}

.caption-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}
</style>

<script>
// Media upload preview and caption handling
// Per Q3: Show preview after selection
// Per Q7: Allow caption input per image
document.addEventListener('DOMContentLoaded', function() {
  const fileInput = document.getElementById('media_files');
  const preview = document.getElementById('media-preview');

  fileInput.addEventListener('change', function(e) {
    const files = Array.from(e.target.files);

    if (files.length === 0) {
      preview.style.display = 'none';
      preview.innerHTML = '';
      return;
    }

    if (files.length > 4) {
      alert('Maximum 4 images allowed');
      e.target.value = '';
      return;
    }

    preview.innerHTML = '';
    preview.style.display = 'grid';

    files.forEach((file, index) => {
      const reader = new FileReader();
      reader.onload = function(event) {
        const div = document.createElement('div');
        div.className = 'media-preview-item';
        div.innerHTML = `
          <img src="${event.target.result}" alt="Preview ${index + 1}">
          <input type="text"
                 name="captions[]"
                 placeholder="Caption (optional)"
                 class="caption-input">
        `;
        preview.appendChild(div);
      };
      reader.readAsDataURL(file);
    });
  });
});
</script>
{% endblock %}