<div class="modal-backdrop" id="editAppModal" role="dialog" aria-modal="true" aria-labelledby="editAppTitle">
  <div class="modal-content wide">
    <div class="modal-header">
      <h3 id="editAppTitle">Sửa Application</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 id="editAppForm" class="modal-form" method="post" action="/applications">
      <input type="hidden" name="returnTo" value="<%= currentPath || '/applications' %>">
      <div class="form-grid">
        <label class="form-field">
          <span>App code</span>
          <input type="text" name="appCode" pattern="[A-Za-z0-9._+-]+" title="Only letters, numbers, dot, underscore, plus and hyphen. No spaces." required data-edit-app-field="appCode">
        </label>
        <label class="form-field">
          <span>Version</span>
          <input type="text" name="appVersion" pattern="[A-Za-z0-9._:+~=-]+" title="Only letters, numbers and . _ : + ~ = - characters." required data-edit-app-field="appVersion">
        </label>
        <label class="form-field">
          <span>Status</span>
          <select name="status" data-edit-app-field="status">
            <option value="Draft">Draft</option>
            <option value="Released">Released</option>
            <option value="Archived">Archived</option>
          </select>
        </label>
        <label class="form-field full">
          <span>App name</span>
          <input type="text" name="appName" required data-edit-app-field="appName">
        </label>
        <label class="form-field full">
          <span>Open URL</span>
          <input type="text" name="openUrl" placeholder="http://127.0.0.1:5000" data-edit-app-field="openUrl">
        </label>
        <label class="form-field full">
          <span>Notes</span>
          <textarea name="notes" data-edit-app-field="notes"></textarea>
        </label>
      </div>
      <div class="modal-mini-table">
        <% packages.forEach((item) => { %>
          <label>
            <input class="checkbox" type="checkbox" name="packageIds" value="<%= item.id %>" data-edit-app-package="<%= item.id %>">
            <span>
              <strong><%= item.name %></strong>
              <small><%= item.code %></small>
            </span>
            <select class="mini-select" name="version_<%= item.id %>" data-edit-app-version="<%= item.id %>">
              <option value="">Latest/default</option>
              <% item.versions.forEach((version) => { %>
                <option value="<%= version.id %>"><%= version.version %></option>
              <% }) %>
            </select>
          </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">
          <span class="material-symbols-outlined">save</span>
          Lưu
        </button>
      </div>
    </form>
  </div>
</div>
