<%- include('partials/page-start') %>

<section class="page">
  <div class="page-header">
    <div>
      <h1>Đóng gói App</h1>
      <p>Tạo app bằng cách chọn package `.deb` hoặc Docker và gán version cụ thể.</p>
    </div>
    <div class="page-actions">
      <button class="btn btn-secondary" type="submit" form="builderForm" name="status" value="Draft">
        <span class="material-symbols-outlined">draft</span>
        Lưu nháp
      </button>
      <button class="btn btn-primary" type="submit" form="builderForm">
        <span class="material-symbols-outlined">save</span>
        Tạo App
      </button>
    </div>
  </div>

  <div class="builder-layout">
    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>Thông tin App</h2>
        </div>
      </div>
      <form id="builderForm" class="form-stack" action="/applications" method="post">
        <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>
        </label>
        <label class="form-field">
          <span>App version</span>
          <input type="text" name="appVersion" pattern="[A-Za-z0-9._:+~=-]+" title="Only letters, numbers and . _ : + ~ = - characters." required>
        </label>
        <label class="form-field full">
          <span>App name</span>
          <input type="text" name="appName" required>
        </label>
        <label class="form-field full">
          <span>Open URL</span>
          <input type="text" name="openUrl" placeholder="http://127.0.0.1:5000">
        </label>
        <label class="form-field full">
          <span>Notes</span>
          <textarea name="notes"></textarea>
        </label>
      </form>
    </section>

    <section class="table-panel builder-table">
      <div class="panel-header">
        <div>
          <h2>Chọn package</h2>
          <p>Có thể dùng chung `.deb` và Docker trong một app.</p>
        </div>
      </div>
      <div class="page-filters inline">
        <label class="filter-field wide">
          <span>Search</span>
          <input type="search" placeholder="Tìm package..." data-table-search="builderPackagesTable">
        </label>
      </div>
      <div class="table-wrap">
        <table id="builderPackagesTable" class="data-table">
          <thead>
            <tr>
              <th>Use</th>
              <th>Package</th>
              <th>Type</th>
              <th>Version</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <% if (packages.length === 0) { %>
              <tr>
                <td colspan="5" class="table-empty">Chưa có package để đóng gói. Hãy upload package trước.</td>
              </tr>
            <% } %>
            <% packages.forEach((item, index) => { %>
              <tr data-search="<%= `${item.name} ${item.code} ${item.latestVersion}`.toLowerCase() %>">
                <td>
                  <input class="checkbox" form="builderForm" type="checkbox" name="packageIds" value="<%= item.id %>" <%= index < 3 ? 'checked' : '' %> aria-label="Chọn <%= item.name %>">
                </td>
                <td>
                  <strong><%= item.name %></strong>
                  <span class="table-subtitle"><%= item.code %></span>
                </td>
                <td><span class="badge <%= helpers.packageTypeClass(item.type) %>"><%= helpers.packageTypeLabel(item.type) %></span></td>
                <td>
                  <select class="mini-select" form="builderForm" name="version_<%= item.id %>" aria-label="Version của <%= item.name %>">
                    <% item.versions.forEach((version) => { %>
                      <option value="<%= version.id %>"><%= version.version %></option>
                    <% }) %>
                  </select>
                </td>
                <td><span class="badge <%= helpers.statusClass(item.status) %>"><%= item.status %></span></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</section>

<%- include('partials/page-end') %>
