{% extends 'common/base.html' %}
{% block title %}Add Module Menu{% endblock %}
{% block content %}

<div class="container-fluid" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Add Module Menu</h1>
        <a href="#" class="btn btn-secondary">Back to Menu List</a>
    </div>

    <div class="row">
        <div class="col-lg-8 offset-lg-2">
            <div class="card shadow">
                <div class="card-body">
                    <form method="POST">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="module">Select Module <span class="text-danger">*</span></label>
                            <select name="module" id="module" class="form-control" required>
                                <option value="">-- Select Module --</option>
                                {% for module in modules %}
                                    <option value="{{ module.id }}">{{ module.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="name">Menu Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label for="menu_url">Menu URL</label>
                            <input type="text" name="menu_url" id="menu_url" class="form-control" placeholder="/your-url/">
                        </div>

                        <div class="form-group">
                            <label for="rank">Rank</label>
                            <input type="number" name="rank" id="rank" class="form-control" value="1" min="1">
                        </div>

                        <div class="form-group">
                            <label for="icon">Icon</label>
                            <input type="text" name="icon" id="icon" class="form-control" placeholder="fa fa-users">
                        </div>

                        <div class="form-group">
                            <label for="color">Color</label>
                            <input type="text" name="color" id="color" class="form-control" placeholder="e.g., text-primary, text-success">
                        </div>

                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="status" name="status" checked>
                            <label class="form-check-label" for="status">Active</label>
                        </div>

                        <button type="submit" class="btn btn-success">Save Menu</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}