<div class="modal-backdrop" id="updatePackageModal" role="dialog" aria-modal="true" aria-labelledby="updatePackageTitle">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="updatePackageTitle">Update package version</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="/package-versions" method="post" enctype="multipart/form-data">
      <div class="form-grid">
        <label class="form-field full">
          <span>Package</span>
          <select name="packageId" required>
            <% packages.forEach((item) => { %>
              <option value="<%= item.id %>" <%= typeof packageItem !== 'undefined' && packageItem.id === item.id ? 'selected' : '' %>><%= item.code %> - <%= item.name %></option>
            <% }) %>
          </select>
        </label>
        <label class="form-field">
          <span>Version</span>
          <input type="text" name="version" placeholder="2.5.0" pattern="[A-Za-z0-9._:+~=-]+" title="Only letters, numbers and . _ : + ~ = - characters." required>
          <small>Nhap version moi de them, hoac version da co de re-upload artifact.</small>
        </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 version mới vào đây hoặc chọn file</strong>
              <small>File .deb hoặc archive Docker export đều dùng được</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>
        <label class="form-field full">
          <span>Docker image/tag</span>
          <input type="text" name="dockerImage" placeholder="registry.local/robot/fleet-agent:2.0.0">
        </label>
        <label class="form-field full">
          <span>Change log</span>
          <textarea name="changeLog" placeholder="Mô tả thay đổi trong version này"></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">Cập nhật</button>
      </div>
    </form>
  </div>
</div>
