<div class="loading-screen" *ngIf="!authChecked">
  <mat-spinner diameter="40"></mat-spinner>
</div>

<main class="login-shell" *ngIf="authChecked && !user">
  <section class="login-panel">
    <div class="brand-mark">
      <mat-icon>confirmation_number</mat-icon>
    </div>
    <h1>Ticket Web Console</h1>
    <p>Operational access for Telegram users, filters, notifications, and ticket search.</p>

    <form (ngSubmit)="login()" class="login-form">
      <mat-form-field appearance="outline">
        <mat-label>Username</mat-label>
        <input
          matInput
          name="username"
          autocomplete="username"
          [(ngModel)]="loginForm.username"
          (input)="loginForm.username = textInputValue($event)">
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>Password</mat-label>
        <input
          matInput
          name="password"
          type="password"
          autocomplete="current-password"
          [(ngModel)]="loginForm.password"
          (input)="loginForm.password = textInputValue($event)">
      </mat-form-field>

      <button mat-flat-button color="primary" type="submit" [disabled]="loginLoading">
        <mat-icon>login</mat-icon>
        Sign in
      </button>
    </form>
  </section>
</main>

<mat-sidenav-container class="app-shell" *ngIf="authChecked && user">
  <mat-sidenav mode="side" opened class="sidenav">
    <div class="side-title">
      <mat-icon>confirmation_number</mat-icon>
      <span>Ticket</span>
    </div>
    <mat-nav-list>
      <button
        mat-button
        class="nav-button"
        *ngFor="let item of navItems"
        [class.active]="activeView === item.id"
        (click)="setView(item.id)">
        <mat-icon>{{ item.icon }}</mat-icon>
        <span>{{ item.label }}</span>
      </button>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar class="topbar">
      <div>
        <div class="eyebrow">San Marco Ticketing</div>
        <h2>{{ activeView }}</h2>
      </div>
      <span class="spacer"></span>
      <button mat-icon-button matTooltip="Refresh" (click)="refreshActive()">
        <mat-icon>refresh</mat-icon>
      </button>
      <div class="user-pill">
        <mat-icon>admin_panel_settings</mat-icon>
        <span>{{ user.display_name || user.username }}</span>
      </div>
      <button mat-stroked-button (click)="logout()">
        <mat-icon>logout</mat-icon>
        Logout
      </button>
    </mat-toolbar>

    <section class="content">
      <div class="alert-banner" *ngIf="appError">
        <mat-icon>error</mat-icon>
        <span>{{ appError }}</span>
        <button mat-icon-button matTooltip="Dismiss" (click)="appError = ''">
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <ng-container [ngSwitch]="activeView">
        <section *ngSwitchCase="'dashboard'" class="view-stack">
          <div class="section-header">
            <div>
              <h3>Overview</h3>
              <p>Bot activity, indexed knowledge, and recent ticket movement.</p>
            </div>
            <mat-spinner *ngIf="dashboardLoading" diameter="28"></mat-spinner>
          </div>

          <div class="inline-error" *ngIf="dashboardError">
            <mat-icon>warning</mat-icon>
            <span>{{ dashboardError }}</span>
          </div>

          <div class="kpi-grid" *ngIf="dashboardData">
            <mat-card class="kpi-card">
              <mat-icon>inventory_2</mat-icon>
              <span>Indexed tickets</span>
              <strong>{{ dashboardData.ai?.indexed_count || 0 }}</strong>
            </mat-card>
            <mat-card class="kpi-card">
              <mat-icon>manage_search</mat-icon>
              <span>AI searches</span>
              <strong>{{ dashboardData.ai?.search_count || 0 }}</strong>
            </mat-card>
            <mat-card class="kpi-card warn" [class.hot]="(dashboardData.bot?.pending_users || 0) > 0">
              <mat-icon>person_add</mat-icon>
              <span>Pending users</span>
              <strong>{{ dashboardData.bot?.pending_users || 0 }}</strong>
            </mat-card>
            <mat-card class="kpi-card">
              <mat-icon>filter_alt</mat-icon>
              <span>Saved filters</span>
              <strong>{{ dashboardData.bot?.filters || 0 }}</strong>
            </mat-card>
          </div>

          <div class="dashboard-grid" *ngIf="dashboardData">
            <section class="panel">
              <div class="panel-header">
                <h4>Recent tickets</h4>
                <span *ngIf="!dashboardData.mysql?.ok" class="status-bad">MySQL unavailable</span>
              </div>
              <div class="compact-list" *ngIf="dashboardData.recent_tickets?.length; else noRecentTickets">
                <button class="compact-row" *ngFor="let ticket of dashboardData.recent_tickets" (click)="openTicket(ticket.ticket_id); setView('tickets')">
                  <span class="ticket-number">#{{ ticket.ticket_id }}</span>
                  <span class="compact-main">{{ shortText(ticket.subject, 90) }}</span>
                  <span class="compact-meta">{{ ticket.product || '-' }} · {{ ticket.opened_at | date:'short' }}</span>
                </button>
              </div>
              <ng-template #noRecentTickets>
                <p class="empty-text">No recent tickets returned by MySQL.</p>
              </ng-template>
            </section>

            <section class="panel">
              <div class="panel-header">
                <h4>Recent feedback</h4>
              </div>
              <div class="compact-list" *ngIf="dashboardData.recent_feedback?.length; else noFeedback">
                <button class="compact-row" *ngFor="let feedback of dashboardData.recent_feedback" (click)="openTicket(feedback.suggested_ticket_id); setView('tickets')">
                  <span class="ticket-number">{{ feedback.feedback }}</span>
                  <span class="compact-main">#{{ feedback.query_ticket_id }} → #{{ feedback.suggested_ticket_id }}</span>
                  <span class="compact-meta">{{ feedback.product || '-' }} · {{ feedback.created_at | date:'short' }}</span>
                </button>
              </div>
              <ng-template #noFeedback>
                <p class="empty-text">No feedback recorded yet.</p>
              </ng-template>
            </section>
          </div>
        </section>

        <section *ngSwitchCase="'tickets'" class="view-stack">
          <div class="section-header">
            <div>
              <h3>Tickets</h3>
              <p>Read-only browsing from MySQL. Default range is the last 30 days.</p>
            </div>
            <button mat-flat-button color="primary" (click)="loadTickets(true)" [disabled]="ticketLoading">
              <mat-icon>search</mat-icon>
              Load
            </button>
          </div>

          <section class="filter-bar">
            <mat-form-field appearance="outline">
              <mat-label>Ticket, client, subject</mat-label>
              <input matInput [(ngModel)]="ticketFilters.q" (keyup.enter)="loadTickets(true)">
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>From</mat-label>
              <input matInput type="date" [(ngModel)]="ticketFilters.date_from">
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>To</mat-label>
              <input matInput type="date" [(ngModel)]="ticketFilters.date_to">
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Product</mat-label>
              <mat-select [(ngModel)]="ticketFilters.product_id">
                <mat-option value="">Any</mat-option>
                <mat-option *ngFor="let option of taxonomy.products" [value]="option.id">{{ option.label }}</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Competence</mat-label>
              <mat-select [(ngModel)]="ticketFilters.competence_id">
                <mat-option value="">Any</mat-option>
                <mat-option *ngFor="let option of taxonomy.competences" [value]="option.id">{{ option.label }}</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Status</mat-label>
              <mat-select [(ngModel)]="ticketFilters.status_id">
                <mat-option value="">Any</mat-option>
                <mat-option *ngFor="let option of taxonomy.statuses" [value]="option.id">{{ option.label }}</mat-option>
              </mat-select>
            </mat-form-field>
            <button mat-stroked-button (click)="resetTicketFilters()">
              <mat-icon>backspace</mat-icon>
              Reset
            </button>
          </section>

          <div class="inline-status" *ngIf="taxonomyLoading || taxonomyError">
            <mat-spinner *ngIf="taxonomyLoading" diameter="20"></mat-spinner>
            <span *ngIf="taxonomyLoading">Loading filter lists...</span>
            <mat-icon *ngIf="taxonomyError">warning</mat-icon>
            <span *ngIf="taxonomyError">{{ taxonomyError }}</span>
          </div>

          <div class="inline-error" *ngIf="ticketsError">
            <mat-icon>warning</mat-icon>
            <span>{{ ticketsError }}</span>
          </div>

          <section class="table-panel">
            <table mat-table [dataSource]="tickets" [trackBy]="trackByTicket" class="data-table">
              <ng-container matColumnDef="ticket">
                <th mat-header-cell *matHeaderCellDef>Ticket</th>
                <td mat-cell *matCellDef="let row"><strong>#{{ row.ticket_id }}</strong></td>
              </ng-container>
              <ng-container matColumnDef="client">
                <th mat-header-cell *matHeaderCellDef>Client</th>
                <td mat-cell *matCellDef="let row">{{ shortText(row.client, 42) }}</td>
              </ng-container>
              <ng-container matColumnDef="subject">
                <th mat-header-cell *matHeaderCellDef>Subject</th>
                <td mat-cell *matCellDef="let row">{{ shortText(row.subject, 110) }}</td>
              </ng-container>
              <ng-container matColumnDef="product">
                <th mat-header-cell *matHeaderCellDef>Product</th>
                <td mat-cell *matCellDef="let row">{{ row.product || '-' }}</td>
              </ng-container>
              <ng-container matColumnDef="status">
                <th mat-header-cell *matHeaderCellDef>Status</th>
                <td mat-cell *matCellDef="let row">{{ row.status || '-' }}</td>
              </ng-container>
              <ng-container matColumnDef="opened">
                <th mat-header-cell *matHeaderCellDef>Opened</th>
                <td mat-cell *matCellDef="let row">{{ row.opened_at | date:'short' }}</td>
              </ng-container>
              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let row">
                  <button mat-icon-button matTooltip="Open detail" (click)="openTicket(row.ticket_id)">
                    <mat-icon>open_in_new</mat-icon>
                  </button>
                  <button mat-icon-button matTooltip="Find similar" (click)="searchFromTicket(row.ticket_id)">
                    <mat-icon>hub</mat-icon>
                  </button>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="ticketColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: ticketColumns"></tr>
            </table>
            <div class="table-footer">
              <mat-spinner *ngIf="ticketLoading" diameter="24"></mat-spinner>
              <span *ngIf="!ticketLoading">{{ tickets.length }} tickets loaded</span>
              <button mat-stroked-button *ngIf="ticketHasMore" (click)="loadTickets(false)" [disabled]="ticketLoading">
                <mat-icon>expand_more</mat-icon>
                More
              </button>
            </div>
          </section>

          <section class="detail-panel" *ngIf="selectedTicket || selectedTicketLoading">
            <div class="panel-header">
              <h4>Ticket detail</h4>
              <mat-spinner *ngIf="selectedTicketLoading" diameter="24"></mat-spinner>
            </div>
            <div class="inline-error" *ngIf="selectedTicketError">
              <mat-icon>warning</mat-icon>
              <span>{{ selectedTicketError }}</span>
            </div>
            <ng-container *ngIf="selectedTicket">
              <div class="detail-title">
                <strong>#{{ selectedTicket.ticket_id }}</strong>
                <a [href]="selectedTicket.source_link" target="_blank" rel="noreferrer">Open source</a>
              </div>
              <div class="detail-meta">
                <span>{{ selectedTicket.client || '-' }}</span>
                <span>{{ selectedTicket.product || '-' }}</span>
                <span>{{ selectedTicket.competence || '-' }}</span>
                <span>{{ selectedTicket.status || '-' }}</span>
              </div>
              <h5>{{ selectedTicket.subject || 'No subject' }}</h5>
              <div class="text-columns">
                <article>
                  <h6>Problem</h6>
                  <p>{{ selectedTicket.problem || 'Not available' }}</p>
                </article>
                <article>
                  <h6>Solution</h6>
                  <p>{{ selectedTicket.solution || 'Not available' }}</p>
                </article>
              </div>
            </ng-container>
          </section>
        </section>

        <section *ngSwitchCase="'search'" class="view-stack">
          <div class="section-header">
            <div>
              <h3>AI search</h3>
              <p>Search the Postgres AI index, then open read-only ticket detail from MySQL.</p>
            </div>
            <button mat-stroked-button (click)="resetSearchFilters()">
              <mat-icon>filter_alt_off</mat-icon>
              Clear filters
            </button>
          </div>

          <form class="search-panel" (ngSubmit)="runSearch(true)">
            <mat-button-toggle-group [(ngModel)]="searchMode" name="searchMode" aria-label="Search mode">
              <mat-button-toggle value="text">
                <mat-icon>subject</mat-icon>
                Text
              </mat-button-toggle>
              <mat-button-toggle value="ticket">
                <mat-icon>confirmation_number</mat-icon>
                Ticket
              </mat-button-toggle>
            </mat-button-toggle-group>

            <mat-form-field appearance="outline" class="search-input" *ngIf="searchMode === 'text'">
              <mat-label>Describe the problem</mat-label>
              <input
                matInput
                name="searchTextValue"
                [(ngModel)]="searchTextValue"
                (input)="searchTextValue = textInputValue($event)">
            </mat-form-field>
            <mat-form-field appearance="outline" class="search-input" *ngIf="searchMode === 'ticket'">
              <mat-label>Source ticket number</mat-label>
              <input
                matInput
                name="searchTicketId"
                type="number"
                [(ngModel)]="searchTicketId"
                (input)="searchTicketId = numberInputValue($event)">
            </mat-form-field>

            <button mat-flat-button color="primary" type="submit" [disabled]="searchLoading">
              <mat-icon>manage_search</mat-icon>
              Search
            </button>
          </form>

          <section class="filter-bar compact">
            <mat-form-field appearance="outline">
              <mat-label>Product</mat-label>
              <mat-select [(ngModel)]="searchFilters.product_id">
                <mat-option value="">Any</mat-option>
                <mat-option *ngFor="let option of taxonomy.products" [value]="option.id">{{ option.label }}</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Area</mat-label>
              <mat-select [(ngModel)]="searchFilters.area_id">
                <mat-option value="">Any</mat-option>
                <mat-option *ngFor="let option of taxonomy.areas" [value]="option.id">{{ option.label }}</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Competence</mat-label>
              <mat-select [(ngModel)]="searchFilters.competence_id">
                <mat-option value="">Any</mat-option>
                <mat-option *ngFor="let option of taxonomy.competences" [value]="option.id">{{ option.label }}</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Recent months</mat-label>
              <input matInput type="number" min="1" max="120" [(ngModel)]="searchFilters.recent_months">
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Confidence</mat-label>
              <mat-select [(ngModel)]="searchFilters.min_confidence">
                <mat-option value="">Any</mat-option>
                <mat-option value="media">Media</mat-option>
                <mat-option value="alta">Alta</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-checkbox [(ngModel)]="searchFilters.require_code_match">Same code</mat-checkbox>
          </section>

          <div class="inline-status" *ngIf="taxonomyLoading || taxonomyError">
            <mat-spinner *ngIf="taxonomyLoading" diameter="20"></mat-spinner>
            <span *ngIf="taxonomyLoading">Loading filter lists...</span>
            <mat-icon *ngIf="taxonomyError">warning</mat-icon>
            <span *ngIf="taxonomyError">{{ taxonomyError }}</span>
          </div>

          <div class="inline-error" *ngIf="searchError">
            <mat-icon>warning</mat-icon>
            <span>{{ searchError }}</span>
          </div>

          <section class="results-stack">
            <mat-spinner *ngIf="searchLoading" diameter="30"></mat-spinner>
            <article class="result-row" *ngFor="let result of searchResults">
              <div class="result-head">
                <div>
                  <strong>#{{ result.ticket_id }}</strong>
                  <span>{{ result.confidence }} · {{ result.total_score | number:'1.3-3' }}</span>
                </div>
                <div class="result-actions">
                  <button mat-icon-button matTooltip="Open detail" (click)="openTicket(result.ticket_id); setView('tickets')">
                    <mat-icon>open_in_new</mat-icon>
                  </button>
                  <button mat-icon-button matTooltip="Favorite" (click)="markFeedback(result, 'favorite')">
                    <mat-icon>{{ result.feedback_state === 'favorite' ? 'star' : 'star_border' }}</mat-icon>
                  </button>
                  <button mat-icon-button matTooltip="Useful" *ngIf="searchMode === 'ticket'" (click)="markFeedback(result, 'useful')">
                    <mat-icon>thumb_up</mat-icon>
                  </button>
                  <button mat-icon-button matTooltip="Not useful" *ngIf="searchMode === 'ticket'" (click)="markFeedback(result, 'not_useful')">
                    <mat-icon>thumb_down</mat-icon>
                  </button>
                </div>
              </div>
              <h4>{{ result.subject_text || 'No subject' }}</h4>
              <p>{{ result.solution_preview || result.problem_text || 'No preview available' }}</p>
              <mat-chip-set>
                <mat-chip *ngFor="let reason of result.reasons">{{ reason }}</mat-chip>
                <mat-chip>{{ result.product || '-' }}</mat-chip>
                <mat-chip>{{ result.area || '-' }}</mat-chip>
              </mat-chip-set>
            </article>
            <div class="empty-state" *ngIf="!searchLoading && searchResults.length === 0">
              <mat-icon>travel_explore</mat-icon>
              <span>No search results loaded.</span>
            </div>
            <button mat-stroked-button *ngIf="searchHasMore" (click)="runSearch(false)" [disabled]="searchLoading">
              <mat-icon>expand_more</mat-icon>
              More results
            </button>
          </section>
        </section>

        <section *ngSwitchCase="'users'" class="view-stack">
          <div class="section-header">
            <div>
              <h3>Telegram users</h3>
              <p>Approve users, manage saved filters, and adjust notification preferences.</p>
            </div>
            <button mat-flat-button color="primary" (click)="loadUsers()" [disabled]="usersLoading">
              <mat-icon>refresh</mat-icon>
              Refresh
            </button>
          </div>

          <section class="filter-bar user-filter">
            <mat-form-field appearance="outline">
              <mat-label>Search user</mat-label>
              <input matInput [(ngModel)]="userQuery" (keyup.enter)="loadUsers()">
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Status</mat-label>
              <mat-select [(ngModel)]="userStatus" (selectionChange)="loadUsers()">
                <mat-option value="">All</mat-option>
                <mat-option value="P">Pending</mat-option>
                <mat-option value="A">Approved</mat-option>
              </mat-select>
            </mat-form-field>
          </section>

          <div class="inline-status" *ngIf="taxonomyLoading || taxonomyError">
            <mat-spinner *ngIf="taxonomyLoading" diameter="20"></mat-spinner>
            <span *ngIf="taxonomyLoading">Loading filter lists...</span>
            <mat-icon *ngIf="taxonomyError">warning</mat-icon>
            <span *ngIf="taxonomyError">{{ taxonomyError }}</span>
          </div>

          <div class="inline-error" *ngIf="usersError">
            <mat-icon>warning</mat-icon>
            <span>{{ usersError }}</span>
          </div>

          <div class="users-layout">
            <section class="table-panel">
              <table mat-table [dataSource]="users" [trackBy]="trackByUser" class="data-table user-table">
                <ng-container matColumnDef="tid">
                  <th mat-header-cell *matHeaderCellDef>Telegram ID</th>
                  <td mat-cell *matCellDef="let row">{{ row.tid }}</td>
                </ng-container>
                <ng-container matColumnDef="name">
                  <th mat-header-cell *matHeaderCellDef>Name</th>
                  <td mat-cell *matCellDef="let row">{{ row.username || '-' }} {{ row.surname || '' }}</td>
                </ng-container>
                <ng-container matColumnDef="status">
                  <th mat-header-cell *matHeaderCellDef>Status</th>
                  <td mat-cell *matCellDef="let row">
                    <span class="status-pill" [class.pending]="row.status === 'P'">{{ row.status === 'A' ? 'Approved' : 'Pending' }}</span>
                  </td>
                </ng-container>
                <ng-container matColumnDef="filters">
                  <th mat-header-cell *matHeaderCellDef>Filters</th>
                  <td mat-cell *matCellDef="let row">{{ row.filter_count }}</td>
                </ng-container>
                <ng-container matColumnDef="notifications">
                  <th mat-header-cell *matHeaderCellDef>Notifications</th>
                  <td mat-cell *matCellDef="let row">{{ row.notifications_enabled ? 'On' : 'Paused' }}</td>
                </ng-container>
                <ng-container matColumnDef="actions">
                  <th mat-header-cell *matHeaderCellDef></th>
                  <td mat-cell *matCellDef="let row">
                    <button mat-icon-button matTooltip="Approve" *ngIf="row.status === 'P'" (click)="approveUser(row); $event.stopPropagation()">
                      <mat-icon>check_circle</mat-icon>
                    </button>
                    <button mat-icon-button matTooltip="Toggle bot admin" (click)="toggleAdmin(row); $event.stopPropagation()">
                      <mat-icon>{{ row.user_admin ? 'shield' : 'shield_person' }}</mat-icon>
                    </button>
                  </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="userColumns"></tr>
                <tr
                  mat-row
                  *matRowDef="let row; columns: userColumns"
                  [class.selected-row]="selectedUser?.tid === row.tid"
                  (click)="selectUser(row)">
                </tr>
              </table>
              <div class="table-footer">
                <mat-spinner *ngIf="usersLoading" diameter="24"></mat-spinner>
                <span *ngIf="!usersLoading">{{ users.length }} users</span>
              </div>
            </section>

            <section class="panel user-detail" *ngIf="selectedUser; else pickUser">
              <div class="panel-header">
                <h4>{{ selectedUser.username || selectedUser.tid }}</h4>
                <span class="status-pill" [class.pending]="selectedUser.status === 'P'">{{ selectedUser.status === 'A' ? 'Approved' : 'Pending' }}</span>
              </div>
              <div class="inline-error" *ngIf="userDetailError">
                <mat-icon>warning</mat-icon>
                <span>{{ userDetailError }}</span>
              </div>

              <mat-tab-group>
                <mat-tab label="Filters">
                  <div class="tab-content">
                    <div class="filter-create">
                      <mat-form-field appearance="outline">
                        <mat-label>Type</mat-label>
                        <mat-select [(ngModel)]="filterDraft.sort" (selectionChange)="onFilterSortChange()">
                          <mat-option value="C">Competence</mat-option>
                          <mat-option value="P">Product</mat-option>
                          <mat-option value="A">Area</mat-option>
                          <mat-option value="S">Subarea</mat-option>
                        </mat-select>
                      </mat-form-field>
                      <mat-form-field appearance="outline">
                        <mat-label>Value</mat-label>
                        <mat-select [(ngModel)]="filterDraft.sort_value">
                          <mat-option *ngFor="let option of filterOptions(filterDraft.sort)" [value]="option.id">
                            {{ option.id }} · {{ option.label }}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                      <mat-form-field appearance="outline">
                        <mat-label>Manual ID</mat-label>
                        <input matInput [(ngModel)]="filterDraft.sort_value">
                      </mat-form-field>
                      <button mat-flat-button color="primary" (click)="addFilter()">
                        <mat-icon>add</mat-icon>
                        Add
                      </button>
                    </div>

                    <div class="filter-list" *ngIf="selectedUserFilters.length; else noFilters">
                      <div class="filter-item" *ngFor="let filter of selectedUserFilters; trackBy: trackByFilter">
                        <div>
                          <strong>{{ filter.sort_name }}</strong>
                          <span>{{ filter.label || ('ID ' + filter.sort_value) }}</span>
                        </div>
                        <button mat-icon-button matTooltip="Delete filter" (click)="deleteFilter(filter)">
                          <mat-icon>delete</mat-icon>
                        </button>
                      </div>
                    </div>
                    <ng-template #noFilters>
                      <p class="empty-text">This user has no saved filters.</p>
                    </ng-template>
                  </div>
                </mat-tab>

                <mat-tab label="Notifications">
                  <div class="tab-content settings-form" *ngIf="selectedUserSettings">
                    <mat-slide-toggle [(ngModel)]="selectedUserSettings.notifications_enabled">Notifications enabled</mat-slide-toggle>
                    <mat-slide-toggle [(ngModel)]="selectedUserSettings.high_gravity_only">High gravity only</mat-slide-toggle>

                    <div class="settings-grid">
                      <mat-form-field appearance="outline">
                        <mat-label>Digest minutes</mat-label>
                        <input matInput type="number" min="0" [(ngModel)]="selectedUserSettings.digest_minutes">
                      </mat-form-field>
                      <mat-form-field appearance="outline">
                        <mat-label>Quiet start hour</mat-label>
                        <input matInput type="number" min="0" max="23" [(ngModel)]="selectedUserSettings.quiet_start_hour">
                      </mat-form-field>
                      <mat-form-field appearance="outline">
                        <mat-label>Quiet end hour</mat-label>
                        <input matInput type="number" min="0" max="23" [(ngModel)]="selectedUserSettings.quiet_end_hour">
                      </mat-form-field>
                    </div>

                    <div class="button-row">
                      <button mat-stroked-button (click)="clearQuietHours()">
                        <mat-icon>do_not_disturb_on</mat-icon>
                        Clear quiet hours
                      </button>
                      <button mat-flat-button color="primary" (click)="saveSettings()">
                        <mat-icon>save</mat-icon>
                        Save settings
                      </button>
                    </div>
                  </div>
                </mat-tab>
              </mat-tab-group>
            </section>
            <ng-template #pickUser>
              <section class="panel pick-user">
                <mat-icon>touch_app</mat-icon>
                <span>Select a user to manage filters and notifications.</span>
              </section>
            </ng-template>
          </div>
        </section>
      </ng-container>
    </section>
  </mat-sidenav-content>
</mat-sidenav-container>
