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

{% block title %}차단 IP 목록 - 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;
  }

  .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: middle;
    color:#0f172a;
  }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover td{ background:#f8fafc; }

  .col-ip{ width: 180px; white-space: nowrap; font-weight: 1000; }
  .col-reason{ width: 220px; }
  .col-start{ width: 190px; white-space: nowrap; }
  .col-stop{ width: 190px; white-space: nowrap; }
  .col-pick{ width: 90px; text-align:center; }

  input[type="checkbox"]{
    transform: scale(1.15);
    cursor: pointer;
  }

  .no-data{
    margin: 0;
    padding: 16px 0;
    text-align:center;
    color:#64748b;
    font-style: italic;
  }

  .hint{
    font-size: 12px;
    color:#64748b;
    margin: 10px 0 0 0;
  }

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

{% block content %}

  <div class="page-head">
    <div>
      <h1 class="page-title">차단 IP 목록</h1>
      <div class="page-sub">현재 CrowdSec에서 차단 중인 IP를 확인하고 선택 해제할 수 있습니다.</div>
    </div>
  </div>

  <div class="panel">
    <form method="POST" action="{{ url_for('crowdsec_unban') }}">

      {% if blocks %}
      <table>
        <thead>
          <tr>
            <th class="col-ip">IP 주소</th>
            <th class="col-reason">차단 이유</th>
            <th class="col-start">차단 시작 시간</th>
            <th class="col-stop">차단 만료 시간</th>
            <th class="col-pick">선택</th>
          </tr>
        </thead>
        <tbody>
          {% for block in blocks %}
          <tr>
            <td class="col-ip">{{ block.value }}</td>
            <td class="col-reason">{{ block.origin }}</td>
            <td class="col-start">{{ block.start }}</td>
            <td class="col-stop">{{ block.stop }}</td>
            <td class="col-pick">
              <input type="checkbox" name="ips_to_unban" value="{{ block.value }}">
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

      <div style="margin-top:12px;">
        <button class="btn" type="submit">선택된 IP 차단 해제</button>
      </div>
      <div class="hint">팁: 체크 후 해제 버튼을 누르면 즉시 반영됩니다.</div>

      {% else %}
      <p class="no-data">차단된 IP가 없습니다.</p>
      {% endif %}

    </form>
  </div>

{% endblock %}