{% extends "base.html" %}

{% block content %}
    <h1>Moderation</h1>
    <p>This is the moderation page.</p>

    <!-- Demo Button -->
    <div class="demo-buttons">
        <div class="button-container">
            <a href="{% url 'add_category' %}" class="demo-button">Add Category</a>
        </div>

        <div class="button-container">
            <a href="{% url 'add_item' %}" class="demo-button">Add Item</a>
        </div>

        {% comment %} <div class="button-container">
            <a href="#" class="demo-button">Add *</a>
        </div> {% endcomment %}
    </div>

    <style>
        .demo-buttons {
            display: flex;
            flex-direction: column; /* Stack buttons in a column */
            align-items: center;
            margin-top: 20px;
        }
    
        .button-container {
            margin: 10px 0; /* Add spacing between buttons */
        }

        /* Styling for the button */
        .demo-button {
            background-color:rgb(72, 73, 75);
            color: white;
            text-decoration: none; /* Remove underline from the link */
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            transition: background-color 0.3s ease;
        }
    
        /* Hover effect for the button */
        .demo-button:hover {
            background-color: #0056b3;
        }
    </style>
{% endblock %}