<div class="container-fluid">
    <div class="row">
        <!-- Side Navigation -->
        <nav class="col-12 col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar">
            <div class="position-sticky">
                <a class="navbar-brand" href="#">Butler</a>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="ip_mgmt">ip_mgmt</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="col-12 col-md-9 col-lg-10 ms-sm-auto px-md-4">
            {% extends "components/base.html" %}

            {% block title %}IP Management{% endblock %}

            {% block content %}
            <h1 class="text-center mb-4">IP List</h1>

            <!-- IP 레코드 목록 -->
            <form id="recordForm" method="post" action="">
                {% csrf_token %}
                <table class="table table-striped table-hover table-bordered">
                    <!-- 테이블 내용 -->
                </table>

                {% if request.user.is_authenticated and request.user.is_staff %}
                <!-- 버튼 컨테이너 -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <!-- 데이터 등록 버튼 -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDataModal">
                        <i class="bi bi-plus-lg"></i> Add New IP Record
                    </button>
                    
                    <!-- 전체 삭제 버튼 -->
                    <button type="submit" formaction="{% url 'ip_mgmt_delete' %}" class="btn btn-danger">
                        <i class="bi bi-trash"></i> Delete Selected
                    </button> 

                    <!-- 수정 버튼 -->
                    <button type="button" id="editSelectedButton" class="btn btn-warning" disabled>
                        <i class="bi bi-pencil-square"></i> Edit Selected
                    </button>
                </div>
                {% endif %}
            </form>
            {% endblock %}
        </main>
    </div>
</div>