{% extends "base.html" %}
{% block title %}Manifest — {{ set_name }}{% endblock %}
{% block content %}

<h1>Set Manifest <span class="subtitle">— {{ set_name }}</span></h1>

<div class="manifest-layout">
  <form x-data="manifestEditor()" @submit.prevent="save" class="card">
    <div class="form-grid">
      <div class="form-group">
        <label for="m-id">ID</label>
        <input type="text" id="m-id" x-model="id">
      </div>
      <div class="form-group">
        <label for="m-name">Name</label>
        <input type="text" id="m-name" x-model="name">
      </div>
      <div class="form-group">
        <label for="m-version">Version</label>
        <input type="text" id="m-version" x-model="version">
      </div>
      <div class="form-group">
        <label for="m-author">Author</label>
        <input type="text" id="m-author" x-model="author">
      </div>
      <div class="form-group full-width">
        <label for="m-desc">Description</label>
        <textarea id="m-desc" x-model="description" rows="2"></textarea>
      </div>
      <div class="form-group">
        <label for="m-engine">Engine version</label>
        <input type="text" id="m-engine" x-model="engine_version">
      </div>
    </div>

    <div class="manifest-info">
      <p><strong>Cards:</strong> {{ card_count }}</p>
      <p><strong>Decks:</strong> {{ deck_list|join(', ') or '(none)' }}</p>
      <p class="hint">Card and deck counts are auto-calculated from the set directory.</p>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary" :disabled="saving">
        <span x-show="!saving">Save Manifest</span>
        <span x-show="saving">Saving...</span>
      </button>
      <span x-show="message" :class="'msg ' + msgType" x-text="message"></span>
    </div>
  </form>
</div>

<script>
function manifestEditor() {
  return {
    id: {{ manifest.id|tojson }},
    name: {{ manifest.name|tojson }},
    version: {{ manifest.get('version', '1.0.0')|tojson }},
    author: {{ manifest.get('author', '')|tojson }},
    description: {{ manifest.get('description', '')|tojson }},
    engine_version: {{ manifest.get('engine_version', '>=0.1.8')|tojson }},
    saving: false,
    message: '',
    msgType: 'success',

    async save() {
      this.saving = true;
      this.message = '';
      try {
        const res = await fetch('/api/sets/{{ set_id }}/manifest', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            id: this.id,
            name: this.name,
            version: this.version,
            author: this.author,
            description: this.description,
            engine_version: this.engine_version,
          }),
        });
        const data = await res.json();
        if (res.ok && data.success) {
          this.msgType = 'success';
          this.message = 'Manifest saved.';
        } else {
          this.msgType = 'error';
          this.message = data.error || 'Save failed';
        }
      } catch (e) {
        this.msgType = 'error';
        this.message = 'Network error: ' + e.message;
      }
      this.saving = false;
    },
  };
}
</script>

<style>
.manifest-info { background: #f5f5f5; padding: 12px 16px; border-radius: 6px; margin: 12px 0; }
.manifest-info p { margin: 4px 0; }
.hint { color: #888; font-style: italic; font-size: 0.9em; }
</style>
{% endblock %}