{% extends "admin/change_list.html" %}
{% load static %}

{% block extrastyle %}
{{ block.super }}
<style>
    /* Theme Light */
    :root {
        --button-border-light: #447e9b;
        --button-text-light: #447e9b;
        --button-hover-bg-light: #447e9b;
        --button-hover-text-light: #ffffff;
    }

    /* Theme Dark */
    [data-theme="dark"] {
        --button-border-dark: #79aec8;
        --button-text-dark: #79aec8;
        --button-hover-bg-dark: #79aec8;
        --button-hover-text-dark: #000000;
    }

    .button-group {
        display: inline-flex;
        margin-bottom: 20px;
        border: 1px solid var(--button-border-light);
        border-radius: 4px;
    }

    .custom-button {
        flex: 1;
        padding: 8px 16px;
        background: transparent;
        color: var(--button-text-light);
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s ease;
        min-width: 120px;
        text-align: center;
    }

    .custom-button:first-child {
        border-right: 2px solid var(--button-border-light);
    }

    .custom-button:hover {
        background-color: var(--button-hover-bg-light);
        color: var(--button-hover-text-light);
    }

    .button-container {
        text-align: right;
        padding: 0 20px;
    }

    /* Dark Theme Styles */
    @media (prefers-color-scheme: dark) {
        .button-group {
            border-color: var(--button-border-dark);
        }
        .custom-button:first-child {
            border-right-color: var(--button-border-dark);
        }
        .custom-button {
            color: var(--button-text-dark);
        }
        .custom-button:hover {
            background-color: var(--button-hover-bg-dark);
            color: var(--button-hover-text-dark);
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="button-container">
        <div class="button-group">
            {% if perms.transaction.add_transaction or perms.transaction.change_transaction %}
                <a href="{% url 'cashier' %}" class="custom-button">
                    Kasir
                </a>
            {% endif %}
            <a href="{% url 'report' %}" class="custom-button">
                Laporan
            </a>
        </div>
    </div>
    {{ block.super }}
{% endblock %}