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

{% block title %}시나리오 관리 - RealNAS Security{% endblock %}

{% block style %}
<style>
  :root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --line:#e5e7eb;
    --line2:#eef2f7;
    --ok-bg:#ecfdf5;
    --ok-bd:#bbf7d0;
    --ok-tx:#166534;
    --bad-bg:#fff1f2;
    --bad-bd:#fecdd3;
    --bad-tx:#9f1239;
    --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  }

  body{ background:var(--bg); }

  .wrap{
    max-width: 1180px;
    margin: 28px auto 70px auto;
    padding: 0 18px;
  }

  .panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius: 16px;
    overflow:hidden;
    box-shadow: var(--shadow);
  }

  .panel-head{
    padding: 18px 20px 14px 20px;
    border-bottom:1px solid var(--line2);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
  }

  .h-left{ min-width: 260px; }
  .title{
    margin:0;
    font-size: 26px;
    font-weight: 1000;
    letter-spacing: -0.4px;
    color:var(--text);
  }
  .sub{
    margin: 6px 0 0 0;
    font-size: 13px;
    color:var(--muted);
  }

  .h-right{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
  }

  .stat{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 7px 10px;
    border:1px solid var(--line);
    border-radius: 999px;
    background:#fff;
    font-size: 12px;
    font-weight: 900;
    color:var(--text);
    white-space:nowrap;
  }
  .dot{ width:8px; height:8px; border-radius:999px; background:#cbd5e1; display:inline-block; }
  .dot.on{ background:#22c55e; }
  .dot.off{ background:#ef4444; }

  .toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding: 12px 20px;
    border-bottom:1px solid var(--line2);
    background:#fff;
  }
  .left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

  .search-wrap{ position:relative; display:flex; align-items:center; }
  .search{
    width: 320px;
    max-width: 60vw;
    padding: 9px 12px 9px 34px;
    border:1px solid var(--line);
    border-radius: 12px;
    outline:none;
    font-size: 13px;
    background:#fff;
    color:var(--text);
  }
  .search:focus{ border-color:#0f172a; box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
  .search-ico{
    position:absolute;
    left: 11px;
    font-size: 14px;
    color: #94a3b8;
    user-select:none;
  }

  .filters{ display:flex; gap:8px; align-items:center; }
  .chip{
    padding: 8px 12px;
    border:1px solid var(--line);
    border-radius: 999px;
    background:#fff;
    font-size: 12px;
    font-weight: 900;
    cursor:pointer;
    user-select:none;
    color:var(--text);
    white-space:nowrap;
    transition: .15s ease;
  }
  .chip:hover{ border-color:#0f172a; transform: translateY(-1px); }
  .chip.on{ border-color:#0f172a; background:#0f172a; color:#fff; }

  .hint{
    font-size: 12px;
    color: var(--muted);
    padding: 10px 20px 0 20px;
  }

  .table-wrap{ padding: 14px 14px 16px 14px; background:#fff; }

  table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    border:1px solid var(--line);
    border-radius: 14px;
    overflow:hidden;
  }

  thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    text-align:left;
    padding: 12px 12px;
    background:#f8fafc;
    border-bottom:1px solid var(--line);
    font-weight: 1000;
    color:var(--text);
  }
  thead th + th { border-left:1px solid var(--line2); }

  tbody td{
    padding: 12px 12px;
    border-bottom:1px solid #f1f5f9;
    vertical-align: middle;
    background:#fff;
  }
  tbody tr:nth-child(2n) td{ background:#fcfdff; }
  tbody tr:hover td{ background:#f8fafc; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody td + td{ border-left:1px solid #f1f5f9; }

  .c-name{ width: 68%; }
  .c-status{ width: 12%; text-align:center; }
  .c-action{ width: 20%; text-align:right; }

  .name{ font-weight: 1000; color:var(--text); letter-spacing:-0.1px; }
  .raw{ margin-top: 4px; font-size: 12px; color:var(--muted); word-break: break-all; }

  .badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 1000;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
  }
  .badge.enabled{ border-color:var(--ok-bd); background:var(--ok-bg); color:var(--ok-tx); }
  .badge.disabled{ border-color:var(--bad-bd); background:var(--bad-bg); color:var(--bad-tx); }

  /* ===== 진짜 토글(체크박스 완전 숨김) ===== */
  .switch{
    display:inline-flex;
    align-items:center;
    gap:10px;
    user-select:none;
    justify-content:flex-end;
  }
  .switch-label{
    font-size: 12px;
    font-weight: 1000;
    color: var(--muted);
    min-width: 34px;
    text-align:right;
  }

  .toggle-input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .toggle{
    position:relative;
    width: 56px;
    height: 32px;
    border-radius: 999px;
    background:#e2e8f0;
    border:1px solid var(--line);
    cursor:pointer;
    transition:.18s ease;
    display:inline-block;
  }
  .toggle::after{
    content:"";
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background:#fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.15);
    transition:.18s ease;
  }
  .toggle-input:focus + .toggle{
    box-shadow: 0 0 0 3px rgba(15,23,42,.10);
    border-color:#0f172a;
  }
  .toggle-input:checked + .toggle{
    background:#0f172a;
    border-color:#0f172a;
  }
  .toggle-input:checked + .toggle::after{
    left: 27px;
  }

  .flash{
    border:1px solid var(--line);
    background:#fff;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 14px 18px 0 18px;
    font-size: 13px;
    color: var(--text);
  }

  @media (max-width: 760px){
    .panel-head{ flex-direction:column; }
    .h-right{ justify-content:flex-start; }
    .toolbar{ flex-direction:column; align-items:stretch; }
    .right{ justify-content:space-between; }
    .c-action{ text-align:center; }
    .search{ width: 100%; max-width: 100%; }
  }
</style>
{% endblock %}

{% block content %}
<div class="wrap">
  <div class="panel">

    <div class="panel-head">
      <div class="h-left">
        <h1 class="title">시나리오 관리</h1>
        <p class="sub">시나리오를 검색/필터하고 ON/OFF로 즉시 적용합니다.</p>
      </div>

      {% set total = scenarios|length %}
      {% set enabled_count = scenarios|selectattr("enabled")|list|length %}
      {% set disabled_count = total - enabled_count %}

      <div class="h-right">
        <span class="stat"><span class="dot"></span>전체 {{ total }}</span>
        <span class="stat"><span class="dot on"></span>ON {{ enabled_count }}</span>
        <span class="stat"><span class="dot off"></span>OFF {{ disabled_count }}</span>
      </div>
    </div>

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <div class="flash">
          {% for message in messages %}
            <div>{{ message }}</div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    <div class="toolbar">
      <div class="left">
        <div class="search-wrap">
          <span class="search-ico">🔎</span>
          <input id="q" class="search" type="text" placeholder="검색 (ssh / http / cve ...)" autocomplete="off">
        </div>
      </div>

      <div class="right">
        <div class="filters">
          <!-- ✅ 기본값 ON -->
          <div class="chip" data-mode="all">전체</div>
          <div class="chip on" data-mode="enabled">ON</div>
          <div class="chip" data-mode="disabled">OFF</div>
        </div>
      </div>
    </div>

    <div class="hint">팁: 토글을 클릭하면 바로 적용됩니다. (목록은 그대로 유지)</div>

    <div class="table-wrap">
      <table id="tbl">
        <thead>
          <tr>
            <th class="c-name">시나리오</th>
            <th class="c-status">상태</th>
            <th class="c-action">동작</th>
          </tr>
        </thead>
        <tbody>
          {% for s in scenarios %}
          <tr data-enabled="{{ '1' if s.enabled else '0' }}">
            <td class="c-name">
              {% if s.desc %}
                <div class="name">{{ s.desc }}</div>
                <div class="raw">{{ s.name }}</div>
              {% else %}
                <div class="name">{{ s.name }}</div>
              {% endif %}
            </td>

            <td class="c-status">
              {% if s.enabled %}
                <span class="badge enabled">ON</span>
              {% else %}
                <span class="badge disabled">OFF</span>
              {% endif %}
            </td>

            <td class="c-action">
              <form class="toggle-form" method="POST" action="{{ url_for('crowdsec_scenarios_toggle') }}" style="margin:0;">
                <input type="hidden" name="scenario_name" value="{{ s.name }}">
                <input type="hidden" name="action" value="{{ 'disable' if s.enabled else 'enable' }}">

                <div class="switch">
                  <span class="switch-label">{{ 'ON' if s.enabled else 'OFF' }}</span>

                  <label style="position:relative; display:inline-flex; align-items:center; margin:0;">
                    <input class="toggle-input" type="checkbox" {% if s.enabled %}checked{% endif %}>
                    <span class="toggle" title="ON/OFF"></span>
                  </label>
                </div>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>
</div>

<script>
  (function(){
    const q = document.getElementById('q');
    const rows = Array.from(document.querySelectorAll('#tbl tbody tr'));
    const chips = Array.from(document.querySelectorAll('.chip'));

    // ✅ 기본 모드 ON
    let mode = 'enabled';

    function apply(){
      const text = (q.value || '').toLowerCase().trim();
      rows.forEach(tr => {
        const enabled = tr.getAttribute('data-enabled') === '1';
        const hay = tr.innerText.toLowerCase();
        const okText = !text || hay.includes(text);
        const okMode = (mode === 'all') ||
          (mode === 'enabled' && enabled) ||
          (mode === 'disabled' && !enabled);
        tr.style.display = (okText && okMode) ? '' : 'none';
      });
    }

    chips.forEach(ch => {
      ch.addEventListener('click', () => {
        chips.forEach(x => x.classList.remove('on'));
        ch.classList.add('on');
        mode = ch.getAttribute('data-mode') || 'enabled';
        apply();
      });
    });

    q.addEventListener('input', apply);

    // 토글 change -> 즉시 POST
    document.querySelectorAll('.toggle-form').forEach(form => {
      const cb = form.querySelector('.toggle-input');
      cb.addEventListener('change', () => {
        const action = form.querySelector('input[name="action"]');
        action.value = cb.checked ? 'enable' : 'disable';
        form.submit();
      });
    });

    apply();
  })();
</script>
{% endblock %}