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

{% block title %}대시보드 - RealNAS Security{% endblock %}

{% block style %}
<style>
  /* 대시보드 전용 - 베이스랑 충돌 안 나게 네이밍 최소화 */
  h1, h2{
    margin: 0 0 12px 0;
    font-weight: 1000;
    color: #0f172a;
    letter-spacing: -0.2px;
  }

  .sec{
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    padding: 18px 18px;
    margin-bottom: 18px;
  }

  .btn-primary{
    background:#0f172a;
    color:#fff;
    border:0;
    padding: 9px 14px;
    border-radius: 10px;
    cursor:pointer;
    font-weight: 900;
  }
  .btn-primary:hover{ background:#111827; }

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

  .muted{ color:#64748b; font-size: 12px; }

  .row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin: 10px 0 0 0;
  }
  .row label{ font-weight: 900; color:#334155; }
  .row input[type="text"]{ width: 280px; max-width: 100%; }
</style>
{% endblock %}

{% block content %}

  <div class="sec">
    <h1>대시보드</h1>
    <button class="btn-primary" onclick="location.href='/share'" style="margin-bottom:12px;">관리 페이지로 돌아가기</button>

    <p>전체 이벤트: <strong>{{ metrics.total_events or '0' }}</strong></p>
    <p>현재 활성 차단 IP: <strong>{{ metrics.active_blocks or '0' }}</strong></p>
    <p>총 시나리오 수: <strong>{{ metrics.scenario_count or '0' }}</strong></p>
    <p>최근 24시간 경고: <strong>{{ metrics.alerts_24h or '0' }}</strong></p>
  </div>

  <div class="sec">
    <h2>차단 IP 목록</h2>
    <form method="POST" action="{{ url_for('crowdsec_unban') }}">
      <table>
        <thead>
          <tr>
            <th>IP 주소</th>
            <th>차단 이유</th>
            <th>차단 시작 시간</th>
            <th>차단 만료 시간</th>
            <th style="width:90px;">선택</th>
          </tr>
        </thead>
        <tbody>
          {% for block in blocks %}
          <tr>
            <td>{{ block.ip }}</td>
            <td>{{ block.reason }}</td>
            <td>{{ block.start_time }}</td>
            <td>{{ block.end_time }}</td>
            <td><input type="checkbox" name="ips_to_unban" value="{{ block.ip }}"></td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" class="muted" style="text-align:center;">차단된 IP가 없습니다.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

      <div style="margin-top:12px;">
        <button class="btn-primary" type="submit">선택된 IP 차단 해제</button>
      </div>
    </form>
  </div>

  <div class="sec">
    <h2>로그 검색</h2>

    <form method="GET" action="{{ url_for('crowdsec_logs') }}">
      <div class="row">
        <label for="search_term">검색어</label>
        <input type="text" id="search_term" name="q" value="{{ request.args.get('q', '') }}" placeholder="IP, 메시지 등">
        <button class="btn-primary" type="submit">검색</button>
      </div>
    </form>

    <div style="margin-top:12px;">
      {% if logs %}
      <table>
        <thead>
          <tr><th style="width:180px;">시간</th><th style="width:160px;">IP</th><th>이벤트</th></tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr>
            <td>{{ log.time }}</td>
            <td>{{ log.ip }}</td>
            <td>{{ log.message }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p class="muted">검색 결과가 없습니다.</p>
      {% endif %}
    </div>

  </div>

{% endblock %}
