<!DOCTYPE html>
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
  xmlns:th="https://www.thymeleaf.org">

<head>
  <th:block
    th:insert="~{fragments/common :: head(title=#{adminUserSettings.manageTeams}, header=#{adminUserSettings.manageTeams})}">
  </th:block>
  <link rel="stylesheet" th:href="@{/css/modern-tables.css}">
</head>

<body>
  <th:block th:insert="~{fragments/common :: game}"></th:block>
  <div id="page-container">
    <div id="content-wrap">
      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>

      <div class="data-container">
        <div class="data-panel">
          <div class="data-header">
            <h1 class="data-title">
              <span class="data-icon">
                <span class="material-symbols-rounded">groups</span>
              </span>
              <span th:text="#{adminUserSettings.manageTeams}">Team Management</span>
            </h1>
          </div>

          <div class="data-body">
            <!-- Back Button -->
            <div class="data-actions data-actions-start">
              <a th:href="@{'/adminSettings'}" class="data-btn data-btn-secondary">
                <span class="material-symbols-rounded">arrow_back</span>
                <span th:text="#{back.toSettings}">Back to Settings</span>
              </a>
            </div>

            <!-- Alert Messages -->
            <div th:if="${addMessage}" class="alert alert-success data-mb-3">
              <span th:text="#{${addMessage}}">Default message if not found</span>
            </div>

            <div th:if="${changeMessage}" class="alert alert-success data-mb-3">
              <span th:text="#{${changeMessage}}">Default message if not found</span>
            </div>

            <div th:if="${deleteMessage}" class="alert alert-danger data-mb-3">
              <span th:text="#{${deleteMessage}}">Default message if not found</span>
            </div>

            <div th:if="${errorMessage}" class="alert alert-danger data-mb-3">
              <span th:text="#{${errorMessage}}">Default message if not found</span>
            </div>

            <!-- Create New Team Button -->
            <div class="data-actions">
              <a href="#" th:data-bs-toggle="${@runningProOrHigher} ? 'modal' : null"
                th:data-bs-target="${@runningProOrHigher} ? '#addTeamModal' : null"
                th:class="${@runningProOrHigher} ? 'data-btn data-btn-primary' : 'data-btn data-btn-danger'"
                th:title="${@runningProOrHigher} ? #{adminUserSettings.createTeam} : #{enterpriseEdition.proTeamFeatureDisabled}">
                <span class="material-symbols-rounded">group_add</span>
                <span th:text="#{adminUserSettings.createTeam}">Create New Team</span>
              </a>
            </div>

            <!-- Team Table -->
            <div class="table-responsive">
              <table class="data-table">
                <thead>
                  <tr>
                    <th scope="col" th:text="#{adminUserSettings.teamName}">Team Name</th>
                    <th scope="col" th:text="#{adminUserSettings.totalMembers}">Total Members</th>
                    <th scope="col" th:title="${@runningProOrHigher} ? #{adminUserSettings.lastRequest} : #{proFeatures}"
                      class="text-overflow" th:text="#{adminUserSettings.lastRequest}">Last Request</th>
                    <th scope="col" th:text="#{adminUserSettings.actions}">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- Try approach 1 - DTO projection -->
                  <tr th:each="teamDto : ${teamsWithCounts}">
                    <td th:text="${teamDto.name}"></td>
                    <td th:text="${teamDto.userCount}"></td>
                    <td
                      th:text="${@runningProOrHigher} ? (${teamLastRequest[teamDto.id] != null ? #dates.format(teamLastRequest[teamDto.id], 'yyyy-MM-dd HH:mm:ss') : 'N/A'}) : #{adminUserSettings.teamHidden}">
                    </td>
                    <td>
                      <div class="data-action-cell">
                        <a th:href="@{'/teams/' + ${teamDto.id}}" class="data-btn data-btn-secondary data-btn-sm"
                          th:title="#{adminUserSettings.viewTeam}">
                          <span class="material-symbols-rounded">search</span> <span th:text="#{view}">View</span>
                        </a>
                        <form th:action="@{'/api/v1/team/delete'}" method="post" style="display:inline-block"
                          onsubmit="return confirmDeleteTeam()">
                          <input type="hidden" name="teamId" th:value="${teamDto.id}" />
                          <button type="submit" class="data-btn data-btn-danger data-btn-sm"
                            th:disabled="${!@runningProOrHigher}" th:classappend="${!@runningProOrHigher} ? 'disabled' : ''"
                            th:title="${@runningProOrHigher} ? #{adminUserSettings.deleteTeam} : #{enterpriseEdition.proTeamFeatureDisabled}">
                            <span class="material-symbols-rounded">delete</span> <span th:text="#{delete}">Delete</span>
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- Delete Confirmation Script -->
            <script th:inline="javascript">
              const confirmDeleteText = /*[[#{adminUserSettings.confirmDeleteTeam}]]*/ 'Are you sure you want to delete this team?';
              function confirmDeleteTeam() {
                return confirm(confirmDeleteText);
              }
            </script>
          </div>
        </div>
      </div>

      <!-- Add Team Modal -->
      <div class="modal fade" id="addTeamModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <form th:action="@{'/api/v1/team/create'}" method="post" class="modal-content data-modal">
            <div class="data-modal-header">
              <h5 class="data-modal-title">
                <span class="data-icon">
                  <span class="material-symbols-rounded">group_add</span>
                </span>
                <span th:text="#{adminUserSettings.createTeam}">Create Team</span>
              </h5>
              <button type="button" class="data-btn-close" data-bs-dismiss="modal" aria-label="Close">
                <span class="material-symbols-rounded">close</span>
              </button>
            </div>
            <div class="data-modal-body">
              <div class="data-form-group">
                <label for="teamName" class="data-form-label" th:text="#{adminUserSettings.teamName}">Team Name</label>
                <input type="text" name="name" id="teamName" class="data-form-control" required />
              </div>
              <div class="data-form-actions">
                <button type="button" class="data-btn data-btn-secondary" data-bs-dismiss="modal">
                  <span class="material-symbols-rounded">close</span>
                  <span th:text="#{cancel}">Cancel</span>
                </button>
                <button type="submit" class="data-btn data-btn-primary">
                  <span class="material-symbols-rounded">check</span>
                  <span th:text="#{adminUserSettings.createTeam}">Create</span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
  </div>
</body>

</html>