{{define "admin/check_logs.html"}}

{{template "admin/layout_head" .}}

<style>

.cs-admin-checklogs-page .cs-admin-checklogs-filter-toolbar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.45rem 0.6rem;

}

.cs-admin-checklogs-page .cs-admin-checklogs-filter-toolbar .input-group-text {

  padding-left: 0.45rem;

  padding-right: 0.45rem;

  font-size: 0.75rem;

  color: #64748b;

  background: #f8fafc;

  border-color: rgba(148, 163, 184, 0.45);

}

.cs-admin-checklogs-page .cs-admin-checklogs-search-wrap .input-group-text {

  background: #fff;

}

.cs-admin-checklogs-page .cs-admin-checklogs-mid-group {

  flex: 0 0 auto;

  width: 9rem;

  max-width: 100%;

}

.cs-admin-checklogs-page .cs-admin-checklogs-result-group {

  flex: 0 0 auto;

  width: 8.5rem;

  max-width: 100%;

}

.cs-admin-checklogs-page .cs-admin-checklogs-search-row {

  display: flex;

  flex: 1 1 16rem;

  min-width: 0;

  align-items: center;

  gap: 0.45rem;

}

.cs-admin-checklogs-page .cs-admin-checklogs-search-wrap {

  flex: 1 1 auto;

  min-width: 0;

}

.cs-admin-checklogs-page .cs-admin-checklogs-filter-actions {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  flex: 0 0 auto;

}

.cs-admin-checklogs-page .cs-admin-filter-card .form-control::placeholder {

  color: #94a3b8;

}

.cs-admin-checklogs-page .ut-checklog-url {

  display: inline-block;

  max-width: 18rem;

  font-size: 0.8125rem;

  color: #475569;

  word-break: break-all;

}

.cs-admin-checklogs-page .ut-checklog-url:hover {

  color: #2563eb;

}

@media (max-width: 767.98px) {

  .cs-admin-checklogs-page .cs-admin-checklogs-mid-group,

  .cs-admin-checklogs-page .cs-admin-checklogs-result-group {

    flex: 1 1 calc(50% - 0.35rem);

    width: auto;

  }

  .cs-admin-checklogs-page .cs-admin-checklogs-search-row {

    flex: 1 1 100%;

  }

}

@media (max-width: 575.98px) {

  .cs-admin-checklogs-page .cs-admin-checklogs-mid-group,

  .cs-admin-checklogs-page .cs-admin-checklogs-result-group {

    flex: 1 1 100%;

  }

  .cs-admin-checklogs-page .ut-checklog-url {

    max-width: 10rem;

  }

}

</style>

<div class="cs-admin-page cs-admin-checklogs-page">

{{template "admin_pagehead" (dict "Icon" "bx-list-ul" "Title" (T "admin.check_logs.title") "Desc" (T "admin.check_logs.desc"))}}



<div class="d-flex flex-wrap gap-2 mb-3">

  <a href="/admin/check-log-tables" class="btn btn-sm btn-outline-primary"><i class="bx bx-data me-1"></i>{{T "admin.check_logs.link_tables"}}</a>

</div>



<div class="card cs-admin-section cs-admin-section--toolbar mb-3 cs-admin-filter-card">

  <div class="card-body py-2 px-3">

    <form class="cs-admin-checklogs-filter-toolbar" method="get" action="/admin/check-logs" autocomplete="off">

      <div class="input-group input-group-sm cs-admin-checklogs-mid-group shadow-sm">

        <span class="input-group-text" title="{{T "admin.check_logs.monitor_id"}}"><i class="bx bx-radar" aria-hidden="true"></i></span>

        <input class="form-control form-control-sm" type="text" inputmode="numeric" name="monitor_id" value="{{index .Data "MonitorID"}}" placeholder="{{T "admin.check_logs.monitor_id"}}" aria-label="{{T "admin.check_logs.monitor_id"}}">

      </div>

      <div class="input-group input-group-sm cs-admin-checklogs-result-group shadow-sm">

        <span class="input-group-text" title="{{T "admin.check_logs.result"}}"><i class="bx bx-check-circle" aria-hidden="true"></i></span>

        <select class="form-select form-select-sm" name="result" aria-label="{{T "admin.check_logs.result"}}">

          <option value="" {{if eq (index .Data "Result") ""}}selected{{end}}>{{T "admin.check_logs.result_all"}}</option>

          <option value="up" {{if eq (index .Data "Result") "up"}}selected{{end}}>{{T "admin.check_logs.result_up"}}</option>

          <option value="down" {{if eq (index .Data "Result") "down"}}selected{{end}}>{{T "admin.check_logs.result_down"}}</option>

        </select>

      </div>

      <div class="cs-admin-checklogs-search-row">

        <div class="input-group input-group-sm cs-admin-checklogs-search-wrap shadow-sm">

          <span class="input-group-text border-end-0"><i class="bx bx-search-alt-2" aria-hidden="true"></i></span>

          <input class="form-control form-control-sm border-start-0" type="search" name="q" value="{{index .Data "Keyword"}}" placeholder="{{T "admin.check_logs.keyword_ph"}}" enterkeyhint="search" autocomplete="off" aria-label="{{T "admin.check_logs.keyword_aria"}}">

        </div>

        <div class="cs-admin-checklogs-filter-actions">

          <button class="btn btn-primary btn-sm" type="submit" title="{{T "admin.check_logs.filter_title"}}"><i class="bx bx-filter-alt" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">{{T "admin.common.filter"}}</span></button>

          {{if index .Data "HasFilter"}}<a href="/admin/check-logs" class="btn btn-outline-secondary btn-sm" title="{{T "admin.check_logs.reset_title"}}"><i class="bx bx-revision" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">{{T "admin.common.reset"}}</span></a>{{end}}

        </div>

      </div>

    </form>

  </div>

</div>



<div class="cs-admin-section">

  <div class="cs-admin-section__head">

    <div class="cs-admin-section__head-icon cs-admin-section__head-icon--violet"><i class="bx bx-time-five"></i></div>

    <div class="cs-admin-section__head-text">

      <h2 class="cs-admin-section__head-title">{{T "admin.check_logs.recent_title"}}</h2>

      <p class="cs-admin-section__head-sub">{{T "admin.check_logs.recent_sub_prefix"}} {{len (index .Data "Logs")}} {{T "admin.check_logs.recent_sub_suffix"}}</p>

    </div>

  </div>

  <div class="cs-admin-section__body cs-admin-section__body--flush">

    <div class="table-responsive" data-nc-privacy-menu>

      <table class="table table-hover mb-0 align-middle">

        <thead class="table-light">

          <tr><th>{{T "admin.check_logs.col_time"}}</th><th>{{T "admin.check_logs.col_monitor"}}</th><th>{{T "admin.check_logs.col_url"}}</th><th>{{T "admin.check_logs.col_status"}}</th><th>{{T "admin.check_logs.col_ms"}}</th><th>{{T "admin.check_logs.col_result"}}</th><th>{{T "admin.check_logs.col_error"}}</th></tr>

        </thead>

        <tbody>

        {{range index .Data "Logs"}}

        <tr>

          <td class="small text-muted text-nowrap">{{unixTime .checked_at}}</td>

          <td class="fw-semibold">{{privacy "text" .monitor_name}}</td>

          <td>

            {{if .monitor_url}}

            <a href="{{.monitor_url}}" class="ut-checklog-url text-decoration-none" target="_blank" rel="noopener noreferrer" title="{{T "privacy_hover_hint"}}">

              <i class="bx bx-link-external me-1"></i>{{privacy "url" .monitor_url}}

            </a>

            {{else}}<span class="text-muted">—</span>{{end}}

          </td>

          <td>

            {{if eq (asInt .is_up) 1}}<span class="text-success fw-semibold">{{.status_code}}</span>

            {{else}}<span class="text-danger fw-semibold">{{.status_code}}</span>{{end}}

          </td>

          <td>{{.response_ms}}</td>

          <td>

            {{if eq (asInt .is_up) 1}}<span class="badge rounded-pill text-bg-success">{{Tp "user_monitor_detail" "result_up"}}</span>

            {{else}}<span class="badge rounded-pill text-bg-danger">{{Tp "user_monitor_detail" "result_down"}}</span>{{end}}

          </td>

          <td class="small text-muted">{{errorTypeLabel .error_type}}</td>

        </tr>

        {{else}}

        <tr><td colspan="7" class="text-center text-muted py-4">{{T "admin.check_logs.empty"}}</td></tr>

        {{end}}

        </tbody>

      </table>

    </div>

  </div>

</div>

</div>

{{template "admin/layout_foot" .}}

{{end}}