<div class="modal-backdrop" id="uploadPackageModal" role="dialog" aria-modal="true" aria-labelledby="uploadPackageTitle">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="uploadPackageTitle">Upload package</h3>
      <button class="icon-button subtle" type="button" aria-label="Đóng modal" data-modal-close>
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>
    <form class="modal-form" action="/packages" method="post" enctype="multipart/form-data">
      <div class="form-grid">
        <label class="form-field">
          <span>Package code</span>
          <input type="text" name="packageCode" placeholder="NAV-STACK" pattern="[A-Za-z0-9._+-]+" title="Only letters, numbers, dot, underscore, plus and hyphen. No spaces." required>
        </label>
        <label class="form-field">
          <span>Package type</span>
          <select name="packageType">
            <option value="deb">.deb</option>
            <option value="apt">APT (Ubuntu repository)</option>
            <option value="docker">Docker</option>
          </select>
        </label>
        <label class="form-field full">
          <span>Package name</span>
          <input type="text" name="packageName" placeholder="Navigation Stack" required>
        </label>
        <label class="form-field full">
          <span>Description</span>
          <input type="text" name="description" placeholder="Mô tả ngắn về package">
        </label>
        <label class="form-field">
          <span>Version</span>
          <input type="text" name="version" placeholder="1.0.0" pattern="[A-Za-z0-9._:+~=-]+" title="Only letters, numbers and . _ : + ~ = - characters." required>
        </label>
        <label class="form-field">
          <span>Release date</span>
          <input type="date" name="releaseDate" value="<%= todayDate %>">
        </label>
        <div class="form-field full">
          <span>Package file</span>
          <div class="file-dropzone" data-file-dropzone>
            <input class="file-input" type="file" name="packageFile" accept=".deb,.tar,.tar.gz,.tgz,.zip,.gz" data-file-input>
            <div class="file-dropzone-content">
              <span class="material-symbols-outlined">upload_file</span>
              <strong>Kéo file vào đây hoặc chọn từ máy</strong>
              <small>Hỗ trợ .deb, .tar, .tgz, .zip cho package hoặc Docker image export</small>
              <button class="btn btn-secondary" type="button" data-file-browse>
                <span class="material-symbols-outlined">attach_file</span>
                Chọn file
              </button>
            </div>
            <div class="file-preview" data-file-preview hidden>
              <span class="material-symbols-outlined">draft</span>
              <div>
                <strong data-file-name>Chưa chọn file</strong>
                <small data-file-meta></small>
              </div>
              <button class="icon-button subtle" type="button" title="Bỏ file" aria-label="Bỏ file đã chọn" data-file-clear>
                <span class="material-symbols-outlined">close</span>
              </button>
            </div>
          </div>
        </div>
        <div class="form-field full">
          <small>APT packages only store metadata and do not need an uploaded file. Enter the exact package name accepted by <code>apt-get install</code>, for example <code>postgresql</code>, <code>nginx</code>, or <code>redis-server</code>. Agents using <code>ALLOWED_APT_PACKAGES=*</code> accept any valid package code.</small>
        </div>
        <label class="form-field full">
          <span>Docker image/tag</span>
          <input type="text" name="dockerImage" placeholder="registry.local/robot/fleet-agent:1.9.0">
        </label>
        <label class="form-field full">
          <span>Change log</span>
          <textarea name="changeLog" placeholder="Ghi chú thay đổi"></textarea>
        </label>
      </div>
      <div class="modal-actions">
        <button class="btn btn-secondary" type="button" data-modal-close>Hủy</button>
        <button class="btn btn-primary" type="submit">Upload</button>
      </div>
    </form>
  </div>
</div>
