<template>

<div class="shadow-box mb-3 p-0" :style="boxStyle">

<div class="list-header">

<!-- Line 1: Checkbox + Status + Tags + Search Bar -->

<div class="filter-row">

<div class="search-wrapper">

<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">

<font-awesome-icon icon="times" />

</a>

<form @submit.prevent>

<input

v-model="searchText"

class="form-control search-input"

:placeholder="$t('Search...')"

:aria-label="$t('Search monitored sites')"

autocomplete="off"

/>

</form>

</div>

<div class="filters-group">

<input

v-if="!selectMode"

v-model="selectMode"

class="form-check-input"

type="checkbox"

:aria-label="$t('selectAllMonitorsAria')"

@change="selectAll = selectMode"

/>

<input

v-else

v-model="selectAll"

class="form-check-input"

type="checkbox"

:aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"

/>

<MonitorListFilter

:filterState="filterState"

:allCollapsed="allGroupsCollapsed"

:hasGroups="groupMonitors.length >= 2"

@update-filter="updateFilter"

@toggle-collapse-all="toggleCollapseAll"

/>

</div>

</div>

<!-- Line 2: Cancel + Actions (shown when selection mode is active) -->

<div v-if="selectMode && selectedMonitorCount > 0" class="selection-row">

<button class="btn btn-outline-normal" @click="cancelSelectMode">

{{ $t("Cancel") }}

</button>

<div class="actions-wrapper">

<div class="dropdown">

<button

class="btn btn-outline-normal dropdown-toggle"

type="button"

data-bs-toggle="dropdown"

:aria-label="$t('Actions')"

:disabled="bulkActionInProgress"

aria-expanded="false"

>

{{ $t("Actions") }}

</button>

<ul class="dropdown-menu">

<li>

<a class="dropdown-item" href="#" @click.prevent="pauseDialog">

<font-awesome-icon icon="pause" class="me-2" />

{{ $t("Pause") }}

</a>

</li>

<li>

<a class="dropdown-item" href="#" @click.prevent="resumeSelected">

<font-awesome-icon icon="play" class="me-2" />

{{ $t("Resume") }}

</a>

</li>

<li>

<a

class="dropdown-item text-danger"

href="#"

@click.prevent="$refs.confirmDelete.show()"

>

<font-awesome-icon icon="trash" class="me-2" />

{{ $t("Delete") }}

</a>

</li>

</ul>

</div>

</div>

<span class="selected-count">

{{ $t("selectedMonitorCountMsg", selectedMonitorCount) }}

</span>

</div>

</div>

<div

ref="monitorList"

class="monitor-list px-2"

:class="{ scrollbar: scrollbar }"

:style="monitorListStyle"

data-testid="monitor-list"

>

<div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">

{{ $t("No Monitors, please") }}

<router-link to="/add">{{ $t("add one") }}</router-link>

</div>

<MonitorListItem

v-for="item in sortedMonitorList"

:key="`${item.id}-${collapseKey}`"

:monitor="item"

:isSelectMode="selectMode"

:isSelected="isSelected"

:select="select"

:deselect="deselect"

:filter-func="filterFunc"

:sort-func="sortFunc"

/>

</div>

</div>

<Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected">

{{ $t("pauseMonitorMsg") }}

</Confirm>

<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteSelected">

{{ $t("deleteMonitorsMsg") }}

</Confirm>

</template>

<script>