{% extends 'admin/custom_base.html' %}
{% block body %}
<div class="container-fluid mt-3">
  <h4 class="mb-1">UGC Avatar Items</h4>
  <p class="text-muted small mb-3">
    Manage items served via <code>GET /api/ugc/OutfitItem/get</code>.
    The client constructs <code>http://kittyrec.tabbycluster.net/{AssetbundleName}</code> for each entry.
  </p>

  {% if error %}
  <div class="alert alert-danger alert-dismissible">{{ error }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}
  {% if success %}
  <div class="alert alert-success alert-dismissible">{{ success }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}

  {% if SCOPE_ADMIN in scopes %}
  <div class="card mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
      <strong>+ Add UGC Outfit Item</strong>
      <div class="custom-control custom-switch mb-0">
        <input type="checkbox" class="custom-control-input" id="cdn-toggle" checked>
        <label class="custom-control-label text-white" for="cdn-toggle">Use CDN upload</label>
      </div>
    </div>
    <div class="card-body">

      <form method="POST" id="add-form" enctype="multipart/form-data">
        <input type="hidden" name="action_type" value="add">
        <input type="hidden" name="use_cdn" id="use-cdn-hidden" value="1">

        <div class="form-row">
          <div class="form-group col-md-5 mb-2">
            <label class="small font-weight-bold">Friendly Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="friendly_name" placeholder="e.g. Space Suit Pack" required maxlength="128">
          </div>
          <div class="form-group col-md-2 mb-2">
            <label class="small font-weight-bold">Version</label>
            <input type="number" class="form-control" name="version" value="0" min="0">
          </div>
        </div>

        <div id="cdn-fields">
          <div class="form-row">
            <div class="form-group col-md-5 mb-2">
              <label class="small font-weight-bold">.assetbundle file <span class="text-danger">*</span></label>
              <input type="file" class="form-control-file" name="assetbundle_file">
              <small class="form-text text-muted">Max 10MB.</small>
            </div>
            <div class="form-group col-md-5 mb-2">
              <label class="small font-weight-bold">.manifest file <span class="text-danger">*</span></label>
              <input type="file" class="form-control-file" name="manifest_file">
              <small class="form-text text-muted">Max 10MB. Make sure this matches the assetbundle you uploaded.</small>
            </div>
          </div>
        </div>

        <div id="direct-fields" style="display:none">
          <div class="form-row">
            <div class="form-group col-md-5 mb-2">
              <label class="small font-weight-bold">AssetbundleName path <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="bundle_url" placeholder="e.g. myitem.assetbundle">
              <small class="form-text text-muted">Path appended to <code>http://kittyrec.tabbycluster.net/</code></small>
            </div>
            <div class="form-group col-md-5 mb-2">
              <label class="small font-weight-bold">ManifestName path <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="manifest_url" placeholder="e.g. myitem.manifest">
              <small class="form-text text-muted">Stem must match the assetbundle path.</small>
            </div>
          </div>
        </div>

        <button type="submit" class="btn btn-success mt-1">Add Item</button>
      </form>
    </div>
  </div>
  {% endif %}

  <div class="card">
    <div class="card-header">
      <strong>Registered UGC Outfit Items</strong>
      <span class="badge badge-secondary ml-1">{{ items|length }}</span>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm table-hover mb-0">
        <thead class="thead-dark">
          <tr>
            <th>Friendly Name</th>
            <th>AssetbundleName</th>
            <th>ManifestName</th>
            <th>Ver</th>
            {% if SCOPE_ADMIN in scopes %}<th>Actions</th>{% endif %}
          </tr>
        </thead>
        <tbody>
          {% if not items %}
          <tr><td colspan="5" class="text-center text-muted py-4">No UGC outfit items registered yet.</td></tr>
          {% else %}
          {% for item in items %}
          <tr id="row-{{ item.id }}">
            <td><strong>{{ item.friendly_name }}</strong></td>
            <td>
              <small class="text-monospace">{{ item.assetbundle_name }}</small>
              {% if item.assetbundle_name.startswith('cdn_') %}
              <a href="http://kittyrec.tabbycluster.net/{{ item.assetbundle_name }}" target="_blank" class="ml-1 small">↗</a>
              {% endif %}
            </td>
            <td>
              <small class="text-monospace">{{ item.manifest_name }}</small>
              {% if item.manifest_name.startswith('cdn_') %}
              <a href="http://kittyrec.tabbycluster.net/{{ item.manifest_name }}" target="_blank" class="ml-1 small">↗</a>
              {% endif %}
            </td>
            <td>{{ item.get('version', 0) }}</td>
            {% if SCOPE_ADMIN in scopes %}
            <td>
              <button type="button" class="btn btn-xs btn-outline-secondary" onclick="toggleEdit('{{ item.id }}')">Edit</button>
              <form method="POST" style="display:inline" onsubmit="return confirm('Delete this UGC item?')">
                <input type="hidden" name="action_type" value="delete">
                <input type="hidden" name="item_id" value="{{ item.id }}">
                <button type="submit" class="btn btn-xs btn-outline-danger">Delete</button>
              </form>
            </td>
            {% endif %}
          </tr>
          <tr id="edit-{{ item.id }}" style="display:none" class="table-warning">
            <td colspan="5">
              <form method="POST" class="form-inline flex-wrap" style="gap:6px">
                <input type="hidden" name="action_type" value="edit">
                <input type="hidden" name="item_id" value="{{ item.id }}">
                <input type="text" class="form-control form-control-sm" name="friendly_name" value="{{ item.friendly_name }}" placeholder="Friendly name" style="width:160px">
                <input type="text" class="form-control form-control-sm" name="bundle_url" value="{{ item.assetbundle_name }}" placeholder="AssetbundleName" style="width:300px">
                <input type="text" class="form-control form-control-sm" name="manifest_url" value="{{ item.manifest_name }}" placeholder="ManifestName" style="width:300px">
                <input type="number" class="form-control form-control-sm" name="version" value="{{ item.get('version', 0) }}" min="0" style="width:70px">
                <button type="submit" class="btn btn-sm btn-success">Save</button>
                <button type="button" class="btn btn-sm btn-secondary" onclick="toggleEdit('{{ item.id }}')">Cancel</button>
              </form>
            </td>
          </tr>
          {% endfor %}
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
function toggleEdit(id) {
  var row = document.getElementById('edit-' + id);
  row.style.display = row.style.display === 'none' ? '' : 'none';
}

(function() {
  var toggle = document.getElementById('cdn-toggle');
  var cdnFields = document.getElementById('cdn-fields');
  var directFields = document.getElementById('direct-fields');
  var hiddenCdn = document.getElementById('use-cdn-hidden');

  function update() {
    if (toggle.checked) {
      cdnFields.style.display = '';
      directFields.style.display = 'none';
      hiddenCdn.value = '1';
    } else {
      cdnFields.style.display = 'none';
      directFields.style.display = '';
      hiddenCdn.value = '0';
    }
  }
  toggle.addEventListener('change', update);
  update();
})();
</script>
{% endblock %}