{{define "content"}}
<div class="container">
  {{template "repo_header" .}}

  <section class="card mb-4">
    <div class="card-header">
      <span class="font-semibold text-sm flex items-center gap-2">
        {{icon "tag" "size-4"}}
        <span>{{t .Lang "releases.new"}}</span>
      </span>
    </div>
    <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/releases/new" enctype="multipart/form-data" class="card-body flex flex-col gap-3">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">

      <div class="grid-2">
        <div>
          <label class="label" for="tag_name">{{t .Lang "releases.tag_name"}}</label>
          <input id="tag_name" name="tag_name" type="text" class="input font-mono" list="existing-tags" placeholder="v1.0.0" value="{{.SelectedTag}}" required autofocus>
          <datalist id="existing-tags">
            {{range .Tags}}
              <option value="{{.}}">
            {{end}}
          </datalist>
          <div class="text-xs text-muted mt-1">{{t .Lang "releases.tag_desc"}}</div>
        </div>

        <div>
          <label class="label" for="target_ref">{{t .Lang "releases.target"}}</label>
          <select id="target_ref" name="target_ref" class="select font-mono">
            {{range .Branches}}
              <option value="{{.}}" {{if eq . $.Repo.DefaultBranch}}selected{{end}}>{{.}}</option>
            {{end}}
          </select>
          <div class="text-xs text-muted mt-1">{{t .Lang "releases.target_desc"}}</div>
        </div>
      </div>

      <div>
        <label class="label" for="title">{{t .Lang "releases.title"}}</label>
        <input id="title" name="title" type="text" class="input" placeholder="{{t .Lang "releases.title_ph"}}" maxlength="200">
      </div>

      <div>
        <label class="label" for="body">{{t .Lang "releases.body"}}</label>
        <textarea id="body" name="body" class="textarea" rows="8" placeholder="{{t .Lang "releases.body_ph"}}" maxlength="50000"></textarea>
      </div>

      <div class="flex flex-col gap-1">
        <label class="label" for="assets" style="margin-bottom:0;">{{t .Lang "releases.assets_upload"}}</label>
        <label class="upload-drop" id="assets-drop" for="assets">
          {{icon "upload" "size-5"}}
          <span class="text-sm font-medium">{{t .Lang "file.upload_pick"}}</span>
          <span class="text-xs">{{t .Lang "releases.assets_upload_hint"}}</span>
          <input id="assets" name="assets" type="file" multiple style="display:none;">
        </label>
        <div id="assets-list" class="text-xs font-mono text-muted"></div>
      </div>

      <div>
        <label class="flex items-center gap-2 cursor-pointer text-sm">
          <input type="checkbox" name="is_prerelease" value="true" class="switch">
          <span>{{t .Lang "releases.is_prerelease"}}</span>
        </label>
      </div>

      <div class="flex items-center justify-end">
        <button type="submit" class="btn btn-primary btn-sm">
          {{icon "tag" "size-3.5"}}
          <span>{{t .Lang "releases.publish_btn"}}</span>
        </button>
      </div>
    </form>
  </section>
</div>
<script>
(function () {
  var input = document.getElementById('assets');
  var drop = document.getElementById('assets-drop');
  var list = document.getElementById('assets-list');
  if (!input || !drop || !list) return;
  function render() {
    var names = [];
    for (var i = 0; i < input.files.length; i++) names.push(input.files[i].name);
    list.textContent = names.length ? names.join('  ·  ') : '';
  }
  input.addEventListener('change', render);
  ['dragover', 'dragenter'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('drag'); });
  });
  ['dragleave', 'drop'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('drag'); });
  });
  drop.addEventListener('drop', function (e) {
    if (e.dataTransfer && e.dataTransfer.files.length) {
      input.files = e.dataTransfer.files;
      render();
    }
  });
})();
</script>
{{end}}