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

<section class="page">
  <div class="page-header">
    <div>
      <div class="breadcrumb"><a href="/applications">Applications</a><span>/</span><span><%= application.code %></span></div>
      <h1><%= application.name %></h1>
      <p><%= application.notes %></p>
    </div>
    <div class="page-actions">
      <button
        class="btn btn-secondary"
        type="button"
        data-app-edit
        data-app-id="<%= application.id %>"
        data-app-code="<%= application.code %>"
        data-app-name="<%= application.name %>"
        data-app-version="<%= application.version %>"
        data-app-status="<%= application.status %>"
        data-app-open-url="<%= application.openUrl %>"
        data-app-notes="<%= application.notes %>"
        data-app-packages="<%= JSON.stringify(application.packages.map((pkg) => ({ packageId: pkg.packageId, selectedVersionId: pkg.selectedVersionId }))) %>"
      >
        <span class="material-symbols-outlined">edit</span>
        Sửa App
      </button>
      <form method="post" action="/applications/<%= application.id %>/release" data-confirm-submit="Chuyển app <%= application.code %> sang Released?">
        <input type="hidden" name="returnTo" value="<%= currentPath %>">
        <button class="btn btn-primary" type="submit" <%= application.status === 'Released' ? 'disabled' : '' %>>
          <span class="material-symbols-outlined">archive</span>
          Đóng gói
        </button>
      </form>
      <form method="post" action="/applications/<%= application.id %>/delete" data-confirm-submit="Xóa app <%= application.code %> khỏi hệ thống?">
        <button class="btn btn-danger" type="submit">
          <span class="material-symbols-outlined">delete</span>
          Xóa
        </button>
      </form>
    </div>
  </div>

  <div class="detail-grid">
    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>Thông tin App</h2>
          <p>Thông tin dùng ở danh sách và pipeline đóng gói.</p>
        </div>
      </div>
      <dl class="detail-list">
        <div><dt>Code</dt><dd><%= application.code %></dd></div>
        <div><dt>Version</dt><dd><strong><%= application.version %></strong></dd></div>
        <div><dt>Package count</dt><dd><%= application.packageCount %></dd></div>
        <div><dt>Created date</dt><dd><%= application.createdAt %></dd></div>
        <div><dt>Created by</dt><dd><%= application.createdBy %></dd></div>
        <div><dt>Open URL</dt><dd class="mono"><%= application.openUrl || '-' %></dd></div>
        <div><dt>Status</dt><dd><span class="badge <%= helpers.statusClass(application.status) %>"><%= application.status %></span></dd></div>
      </dl>
    </section>

    <section class="panel wide-panel">
      <div class="panel-header">
        <div>
          <h2>Package trong App</h2>
          <p>Mỗi package có thể chọn version cụ thể cho app này.</p>
        </div>
      </div>
      <div class="table-wrap compact">
        <table>
          <thead>
            <tr>
              <th>Package</th>
              <th>Type</th>
              <th>Selected version</th>
              <th class="action-col">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% application.packages.forEach((pkg) => { %>
              <tr>
                <td>
                  <strong><%= pkg.name %></strong>
                  <span class="table-subtitle"><%= pkg.code %></span>
                </td>
                <td><span class="badge <%= helpers.packageTypeClass(pkg.type) %>"><%= helpers.packageTypeLabel(pkg.type) %></span></td>
                <td><%= pkg.selectedVersion %></td>
                <td class="action-col">
                  <div class="action-group">
                    <button
                      class="icon-button subtle"
                      type="button"
                      title="Đổi version"
                      data-app-edit
                      data-app-id="<%= application.id %>"
                      data-app-code="<%= application.code %>"
                      data-app-name="<%= application.name %>"
                      data-app-version="<%= application.version %>"
                      data-app-status="<%= application.status %>"
                      data-app-open-url="<%= application.openUrl %>"
                      data-app-notes="<%= application.notes %>"
                      data-app-packages="<%= JSON.stringify(application.packages.map((item) => ({ packageId: item.packageId, selectedVersionId: item.selectedVersionId }))) %>"
                    >
                      <span class="material-symbols-outlined">swap_horiz</span>
                    </button>
                    <form method="post" action="/applications/<%= application.id %>/packages/<%= pkg.packageId %>/delete" data-confirm-submit="Gỡ package <%= pkg.code %> khỏi app?">
                      <button class="icon-button danger" type="submit" title="Gỡ package" aria-label="Gỡ package <%= pkg.name %>">
                        <span class="material-symbols-outlined">link_off</span>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</section>

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