{# 경로/파일: realcom-nas-ui/templates/crowdsec_base.html #}
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{% block title %}RealNAS Security{% endblock %}</title>

  <style>
    :root{
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e5e7eb;
      --line2:#eef2f7;
      --nav:#24262b;
      --link:#aee1ff;
      --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    }

    html, body {
      height: 100%;
    }

    body {
      font-family: 'Malgun Gothic', Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      margin: 0;
      padding: 0;
    }

    /* ===== 상단바 ===== */
    .navbar {
      background: var(--nav);
      color: #fff;
      padding: 10px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      flex-wrap: wrap;
      border-bottom: 2px solid #1d1f24;
      box-sizing: border-box;
    }

    .navbar .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight: 900;
      letter-spacing: .2px;
      white-space: nowrap;
    }

    .navbar .brand-badge{
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(174,225,255,.10);
      border: 1px solid rgba(174,225,255,.25);
      color: #d7f1ff;
      font-weight: 900;
    }

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

    .navbar a {
      color: var(--link);
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 10px;
      transition: background .15s ease, color .15s ease;
      font-weight: 700;
      white-space: nowrap;
    }

    .navbar a:hover {
      color: #fff;
      background: rgba(255,255,255,.08);
      text-decoration: none;
    }

    .navbar a.active {
      color: #111827;
      background: #ffffff;
      text-decoration: none;
    }

    .logout{
      color:#fff !important;
      background:#d32f2f !important;
      border-radius: 10px;
    }
    .logout:hover{
      background:#b91c1c !important;
    }

    /* ===== 본문 컨테이너 ===== */
    .container {
      max-width: 1180px;
      margin: 22px auto;
      padding: 0 18px 50px 18px;
      box-sizing: border-box;
    }

    /* 플래시 메시지 */
    .flash-message {
      background: #fffae6;
      border: 1px solid #ffe58f;
      padding: 12px 14px;
      margin: 16px 0;
      border-radius: 12px;
      color: #665c00;
      font-size: 13px;
      box-shadow: 0 6px 16px rgba(255, 205, 70, 0.18);
    }

    /* 기본 폼 컨트롤 */
    input[type="text"], select {
      padding: 8px 10px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      font-size: 13px;
      width: 280px;
      max-width: 100%;
      box-sizing: border-box;
      background:#fff;
      color: var(--text);
      outline: none;
    }
    input[type="text"]:focus, select:focus{
      border-color:#0f172a;
      box-shadow: 0 0 0 3px rgba(15,23,42,.08);
    }

    button {
      background: #0f172a;
      color: white;
      border: none;
      padding: 9px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: transform .12s ease, background .15s ease;
      font-size: 13px;
      font-weight: 800;
    }
    button:hover {
      background: #111827;
      transform: translateY(-1px);
    }

    /* 유틸 */
    .flex-row {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 10px;
    }
    .flex-row label {
      font-weight: 800;
      color: #334155;
    }
    .status-good { color: #16a34a; font-weight: 900; }
    .status-bad  { color: #dc2626; font-weight: 900; }

    @media (max-width: 768px) {
      .navbar { font-size: 12px; }
      .container { padding: 0 14px 40px 14px; }
      input[type="text"], select { width: 100%; }
      .flex-row { flex-direction: column; align-items: stretch; }
      button { width: 100%; }
    }
  </style>

  {# ✅ 페이지별 추가 CSS를 여기서 받음 (crowdsec_scenarios.html의 block style이 여기로 들어옴) #}
  {% block style %}{% endblock %}

  {# ✅ 페이지별 head 확장용 (필요하면 JS/CSS 링크 추가) #}
  {% block head %}{% endblock %}
</head>

<body>

  <div class="navbar">
    <div class="brand">
      <span>RealNAS Security - 보안관리</span>
      <span class="brand-badge">ADMIN</span>
    </div>

    <div class="nav-links">
      <a href="{{ url_for('crowdsec_dashboard') }}" class="{% if request.endpoint == 'crowdsec_dashboard' %}active{% endif %}">대시보드</a>
      <a href="{{ url_for('crowdsec_blocks') }}" class="{% if request.endpoint == 'crowdsec_blocks' %}active{% endif %}">차단 목록</a>
      <a href="{{ url_for('crowdsec_logs') }}" class="{% if request.endpoint == 'crowdsec_logs' %}active{% endif %}">로그 조회</a>
      <a href="{{ url_for('crowdsec_scenarios') }}" class="{% if request.endpoint == 'crowdsec_scenarios' %}active{% endif %}">시나리오 관리</a>
      <a href="{{ url_for('logout') }}" class="logout">로그아웃</a>
    </div>
  </div>

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

    {% block content %}{% endblock %}
  </div>

</body>
</html>
