{# 경로/파일: realcom-nas-ui/templates/crowdsec_logs.html #}
{% extends "crowdsec_base.html" %}

{% block title %}로그 조회 - RealNAS Security{% endblock %}

{% block style %}
<style>
  .page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin: 6px 0 14px 0;
  }
  .page-title{
    margin:0;
    font-size: 26px;
    font-weight: 1000;
    letter-spacing: -0.4px;
    color:#0f172a;
  }
  .page-sub{
    margin: 6px 0 0 0;
    font-size: 12px;
    color:#64748b;
  }

  .panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    padding: 16px 16px;
  }

  .toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom: 12px;
  }

  .search-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .search-input{
    width: 360px;
    max-width: 70vw;
    padding: 9px 12px;
    border:1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 13px;
    outline:none;
    background:#fff;
    color:#0f172a;
  }
  .search-input:focus{
    border-color:#0f172a;
    box-shadow: 0 0 0 3px rgba(15,23,42,.08);
  }

  .btn{
    background:#0f172a;
    color:#fff;
    border:none;
    padding: 9px 14px;
    border-radius: 10px;
    cursor:pointer;
    font-size: 13px;
    font-weight: 900;
  }
  .btn:hover{ background:#111827; transform: translateY(-1px); }

  table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    border:1px solid #e5e7eb;
    border-radius: 12px;
    overflow:hidden;
    background:#fff;
  }
  thead th{
    background:#f8fafc;
    color:#0f172a;
    font-weight: 1000;
    padding: 11px 12px;
    border-bottom:1px solid #e5e7eb;
    text-align:left;
  }
  tbody td{
    padding: 10px 12px;
    border-bottom:1px solid #eef2f7;
    text-align:left;
    vertical-align: top;
    color:#0f172a;
  }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover td{ background:#f8fafc; }

  .col-time{ width: 170px; white-space:nowrap; }
  .col-ip{ width: 160px; white-space:nowrap; font-weight:900; }
  .no-data{
    margin: 0;
    padding: 16px 0;
    text-align:center;
    color:#64748b;
    font-style: italic;
  }

  @media (max-width: 768px){
    .search-input{ width: 100%; max-width: 100%; }
    .btn{ width: 100%; }
  }
</style>
{% endblock %}

{% block content %}

  <div class="page-head">
    <div>
      <h1 class="page-title">로그 조회</h1>
      <div class="page-sub">IP/메시지 키워드로 이벤트 로그를 검색합니다.</div>
    </div>
  </div>

  <div class="panel">
    <form class="toolbar" method="GET" action="{{ url_for('crowdsec_logs') }}">
      <div class="search-wrap">
        <input
          class="search-input"
          type="text"
          name="q"
          value="{{ request.args.get('q', '') }}"
          placeholder="IP, 메시지 등 검색어 입력"
          autocomplete="off"
        >
        <button class="btn" type="submit">검색</button>
      </div>
    </form>

    {% if logs %}
      <table>
        <thead>
          <tr>
            <th class="col-time">시간</th>
            <th class="col-ip">IP</th>
            <th>이벤트 메시지</th>
          </tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr>
            <td class="col-time">{{ log.time }}</td>
            <td class="col-ip">{{ log.ip }}</td>
            <td>{{ log.message }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="no-data">검색 결과가 없습니다.</p>
    {% endif %}
  </div>

{% endblock %}