<!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=#{team.details.title}, header=#{team.details.header})}"></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">group</span>
              </span>
              <span th:text="'Team: ' + ${team.name}">Team Name</span>
            </h1>
          </div>

          <div class="data-body">
            <div class="data-stats">
              <div class="data-stat-card">
                <div class="data-stat-label" th:text="#{team.totalMembers}">Total Members:</div>
                <div class="data-stat-value" th:text="${teamUsers.size()}">1</div>
              </div>
            </div>

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

            <div class="data-actions data-actions-start">
              <a th:href="@{'/teams'}" class="data-btn data-btn-secondary">
                <span class="material-symbols-rounded">arrow_back</span>
                <span th:text="#{team.back}">Back to Teams</span>
              </a>
            </div>

            <div class="data-section-title" th:text="#{team.members}">Members</div>

            <div class="table-responsive">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th th:text="#{team.username}">Username</th>
                    <th th:text="#{team.role}">Role</th>
                    <th scope="col" th:title="${@runningProOrHigher} ? #{adminUserSettings.lastRequest} : #{proFeatures}"
                      class="text-overflow" th:text="#{adminUserSettings.lastRequest}">Last Request</th>
                    <th th:text="#{team.status}">Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr th:each="user : ${teamUsers}">
                    <td th:text="${user.id}">1</td>
                    <td th:text="${user.username}">username</td>
                    <td th:text="#{${user.roleName}}">Role</td>
                    <td
                      th:text="${@runningProOrHigher} ? (${userLastRequest[user.username] != null ? #dates.format(userLastRequest[user.username], 'yyyy-MM-dd HH:mm:ss') : 'N/A'}) : #{team.hidden}">
                      2023-01-01 12:00:00</td>
                    <td>
                      <span th:if="${user.enabled}" class="data-status data-status-success">
                        <span class="material-symbols-rounded">person</span>
                        <span th:text="#{team.enabled}">Enabled</span>
                      </span>
                      <span th:unless="${user.enabled}" class="data-status data-status-danger">
                        <span class="material-symbols-rounded">person_off</span>
                        <span th:text="#{team.disabled}">Disabled</span>
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- Empty state for when there are no team members -->
            <div th:if="${teamUsers.empty}" class="data-empty">
              <span class="material-symbols-rounded data-empty-icon">person_off</span>
              <p class="data-empty-text" th:text="#{team.noMembers}">This team has no members yet.</p>
              <button data-bs-toggle="modal" data-bs-target="#addUserToTeamModal" class="data-btn data-btn-primary">
                <span class="material-symbols-rounded">person_add</span>
                <span th:text="#{team.addUser}">Add User to Team</span>
              </button>
            </div>

            <!-- Add button for non-empty teams too -->
            <div th:if="${!teamUsers.empty}" class="data-actions data-mt-3">
              <button data-bs-toggle="modal" data-bs-target="#addUserToTeamModal" class="data-btn data-btn-primary">
                <span class="material-symbols-rounded">person_add</span>
                <span th:text="#{team.addUser}">Add User to Team</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- JavaScript for team warning -->
    <script th:inline="javascript">
      function checkUserTeam(userId) {
        // Clear any existing warning
        const warningDiv = document.getElementById('teamChangeWarning');
        const warningMessage = document.getElementById('warningMessage');
        const submitButton = document.getElementById('addUserSubmitBtn');

        // Reset
        warningDiv.style.display = 'none';
        submitButton.onclick = null;

        // Get the selected option
        const selectedOption = document.querySelector('#userId option[value="' + userId + '"]');
        if (!selectedOption) return;

        // Get team data
        const currentTeam = selectedOption.getAttribute('data-team');
        const currentTeamId = selectedOption.getAttribute('data-team-id');
        const newTeamName = /*[[${team.name}]]*/ 'Current Team';

        // If user is already in a team, show warning
        if (currentTeam && currentTeam.length > 0) {
          // Use internationalized message
          const warningTemplate = /*[[#{team.warning.moveUser}]]*/ 'Warning: This will move the user from "{0}" team to "{1}" team. Are you sure?';
          const formattedWarning = warningTemplate.replace('{0}', currentTeam).replace('{1}', newTeamName);
          warningMessage.textContent = formattedWarning;
          warningDiv.style.display = 'block';

          // Add confirmation to submit button
          submitButton.onclick = function (e) {
            // Use internationalized message
            const confirmTemplate = /*[[#{team.confirm.moveUser}]]*/ 'Are you sure you want to move this user from "{0}" team to "{1}" team?';
            const formattedConfirm = confirmTemplate.replace('{0}', currentTeam).replace('{1}', newTeamName);
            if (!confirm(formattedConfirm)) {
              e.preventDefault();
              return false;
            }
            return true;
          };
        }
      }
    </script>

    <!-- Add User to Team Modal -->
    <div class="modal fade" id="addUserToTeamModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <form th:action="@{'/api/v1/team/addUser'}" 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">person_add</span>
              </span>
              <span th:text="#{team.addUser}">Add User to 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">
            <input type="hidden" name="teamId" th:value="${team.id}" />

            <div class="data-form-group">
              <label for="userId" class="data-form-label" th:text="#{team.selectUser}">Select User</label>
              <select name="userId" id="userId" class="data-form-control" required onchange="checkUserTeam(this.value)">
                <option value="" disabled selected th:text="#{selectFilter}">-- Select User --</option>
                <option th:each="user : ${availableUsers}" th:value="${user.id}" th:text="${user.username}"
                  th:data-team="${user.team != null ? user.team.name : ''}"
                  th:data-team-id="${user.team != null ? user.team.id : ''}">
                  Username
                </option>
              </select>
            </div>

            <!-- Warning message for users being moved between teams -->
            <div id="teamChangeWarning" class="alert alert-warning mt-3" style="display: none;">
              <span class="material-symbols-rounded">warning</span>
              <span id="warningMessage">Warning: This will move the user from their current team to this team.</span>
            </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" id="addUserSubmitBtn" class="data-btn data-btn-primary">
                <span class="material-symbols-rounded">check</span>
                <span th:text="#{team.addUser}">Add User</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
  </div>
</body>

</html>