<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>{% block title %}리얼컴 NAS UI{% endblock %}</title>
    <style>
        html, body {
            font-family: 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
            font-size: 12px;
            background: #f8f9fb;
            color: #222;
        }
        .navbar {
            width: 100vw;
            background: #24262b;
            color: #fff;
            height: 32px;
            min-height: 32px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            font-size: 12px;
            margin-bottom: 8px;
            box-sizing: border-box;
            border-bottom: 2px solid #222;
            justify-content: space-between; /* 오른쪽 끝 정렬을 위해 추가 */
        }
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .navbar-title {
            font-size: 13px;
            font-weight: bold;
            margin-right: 30px;
            letter-spacing: 1.5px;
        }
        .navbar a {
            color: #aee1ff;
            text-decoration: none;
            margin-right: 14px;
            font-size: 12px;
        }
        .navbar a.active,
        .navbar a:hover {
            color: #fff;
            text-decoration: underline;
        }
        .logout-btn {
            background: #d32f2f;
            color: #fff;
            border: none;
            border-radius: 3px;
            padding: 2px 8px;
            font-size: 10px;
            cursor: pointer;
            text-decoration: none;
        }
        .container {
            width: 1800px;
            margin: 0 auto;
            display: flex;
            gap: 15px;
        }
        .panel {
            background: #fff;
            border-radius: 7px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.07);
            padding: 15px;
            min-width: 420px;
        }
        .panel h2 { margin: 0 0 8px 0; font-size: 15px; }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 10px;
        }
        th, td {
            border: 1px solid #d3d8df;
            padding: 4px 6px;
            text-align: center;
        }
        th { background: #e8ebf1; }
        input, select, button, textarea {
            font-size: 10px;
            padding: 3px 4px;
            margin-bottom: 4px;
        }
        .actions button, .actions input[type="submit"] {
            font-size: 10px;
            margin: 0 2px;
            padding: 2px 8px;
        }
        .edit-btn { background: #369; color: #fff; border: none; border-radius: 3px; }
        .del-btn  { background: #d32f2f; color: #fff; border: none; border-radius: 3px; }
        .copy-btn { background: #888; color: #fff; border: none; border-radius: 3px; }
        .form-row { display: flex; align-items: center; margin-bottom: 5px; }
        .form-row label { min-width: 60px; }
        .userlist-box { width: 100%; height: 120px; }
        .options { text-align: left; }
        .small { font-size: 9px; color: #777;}
        /* 플래시 메시지 스타일 추가 */
        .flash-message {
            background-color: #fffae6;
            border: 1px solid #ffe58f;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            color: #665c00;
            font-size: 12px;
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body><div class="navbar">
  <div class="navbar-left">
    <div class="navbar-title">리얼컴 NAS UI</div>
    <a href="/share" {% if '/share' in request.path %}class="active"{% endif %}>공유폴더</a>
    <a href="/user" {% if '/user' in request.path %}class="active"{% endif %}>네트워크 사용자 관리</a>
    <!-- Nginx 사용자 추가 메뉴 -->
   <a href="{{ url_for('nginx_users') }}" ...>Nginx 사용자 관리</a>


    <a href="/disk" {% if '/disk' in request.path %}class="active"{% endif %}>디스크관리</a>

    <a href="/backup" {% if '/backup' in request.path %}class="active"{% endif %}>백업</a>
    
    <a href="/logs" {% if '/logs' in request.path %}class="active"{% endif %}>접속로그</a>

    <a href="/ddns" {% if '/ddns' in request.path %}class="active"{% endif %}>DDNS 설정</a>

    <a href="{{ url_for('crowdsec_dashboard') }}" {% if '/crowdsec' in request.path %}class="active"{% endif %}>RealNAS Security</a>

  </div>
  <div>
    <a href="{{ url_for('logout') }}" class="logout-btn" title="로그아웃">로그아웃</a>
  </div>
</div>

</div>

<!-- 플래시 메시지 출력 -->
{% 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 %}
</body>
</html>
