{% extends 'base/layout.html' %}
{% load static %}

{% block content %}
<style>
    /* ========================================
       Global Plugin Styling - Light & Dark Mode Compatible
       ======================================== */
    
    /* Status Badges - High Contrast for All Themes */
    .status-badge, .config-badge {
        padding: 6px 14px;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 5px;
        display: inline-block;
        border: 2px solid transparent;
    }
    
    /* Success Badges - Green */
    .status-badge.success, .config-badge.success,
    .badge.bg-success {
        background-color: #198754 !important;
        color: #ffffff !important;
        border-color: #146c43 !important;
        font-weight: 600 !important;
    }
    
    /* Warning Badges - Amber with Dark Text */
    .status-badge.warning, .config-badge.warning,
    .badge.bg-warning {
        background-color: #ffc107 !important;
        color: #000000 !important;
        border-color: #d39e00 !important;
        font-weight: 700 !important;
    }
    
    /* Danger Badges - Red */
    .status-badge.danger, .config-badge.danger,
    .badge.bg-danger {
        background-color: #dc3545 !important;
        color: #ffffff !important;
        border-color: #b02a37 !important;
        font-weight: 600 !important;
    }
    
    /* Info Badges - Blue (better contrast for light/dark modes) */
    .status-badge.info, .config-badge.info,
    .badge.bg-info {
        background-color: #0d6efd !important;
        color: #ffffff !important;
        border-color: #0a58ca !important;
        font-weight: 600 !important;
    }
    
    /* Primary Badges - Blue */
    .status-badge.running, .badge.bg-primary {
        background-color: #0d6efd !important;
        color: #ffffff !important;
        border-color: #0a58ca !important;
        font-weight: 600 !important;
    }
    
    /* Secondary Badges - Gray */
    .badge.bg-secondary {
        background-color: #6c757d !important;
        color: #ffffff !important;
        border-color: #565e64 !important;
        font-weight: 600 !important;
    }
    
    /* Light Badges - Always visible in both themes */
    .badge.bg-light {
        background-color: #f8f9fa !important;
        color: #212529 !important;
        border: 1px solid #dee2e6 !important;
        font-weight: 600 !important;
    }
    
    /* Dark mode adjustments for bg-light */
    [data-bs-theme="dark"] .badge.bg-light,
    .dark-mode .badge.bg-light {
        background-color: #495057 !important;
        color: #f8f9fa !important;
        border-color: #6c757d !important;
    }
    
    /* Text on warning and info badges must be dark and bold */
    .badge.bg-warning.text-dark,
    .badge.bg-info.text-white {
        font-weight: 700 !important;
    }
    
    /* Enhanced Config Badges */
    .config-badge {
        padding: 8px 16px;
        font-size: 0.95rem;
        margin-bottom: 8px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    /* Card Headers - Better Visibility */
    .card-header.bg-info {
        background-color: #0d6efd !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border: none;
    }
    
    .card-header.config-header {
        background-color: #0d6efd !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border: none;
    }
    
    .card-header.sync-header {
        background-color: #0d6efd !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        border: none;
    }
    
    .card-header.action-header {
        background-color: #198754 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        border: none;
    }
    
    /* Alert Styling - Better Contrast */
    .alert-info {
        background-color: #cff4fc !important;
        color: #055160 !important;
        border-color: #9eeaf9 !important;
    }
    
    [data-bs-theme="dark"] .alert-info,
    .dark-mode .alert-info {
        background-color: #055160 !important;
        color: #cff4fc !important;
        border-color: #087990 !important;
    }
    
    .alert-warning {
        background-color: #fff3cd !important;
        color: #664d03 !important;
        border-color: #ffecb5 !important;
    }
    
    [data-bs-theme="dark"] .alert-warning,
    .dark-mode .alert-warning {
        background-color: #664d03 !important;
        color: #fff3cd !important;
        border-color: #997404 !important;
    }
    
    .alert-danger {
        background-color: #f8d7da !important;
        color: #842029 !important;
        border-color: #f5c2c7 !important;
    }
    
    [data-bs-theme="dark"] .alert-danger,
    .dark-mode .alert-danger {
        background-color: #842029 !important;
        color: #f8d7da !important;
        border-color: #a52834 !important;
    }
    
    .alert-secondary {
        background-color: #e2e3e5 !important;
        color: #41464b !important;
        border-color: #d3d6d8 !important;
    }
    
    [data-bs-theme="dark"] .alert-secondary,
    .dark-mode .alert-secondary {
        background-color: #41464b !important;
        color: #e2e3e5 !important;
        border-color: #52575c !important;
    }
    
    /* Pre/Code blocks - Better Visibility */
    pre.bg-light {
        background-color: #f8f9fa !important;
        color: #212529 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    [data-bs-theme="dark"] pre.bg-light,
    .dark-mode pre.bg-light {
        background-color: #343a40 !important;
        color: #f8f9fa !important;
        border-color: #495057 !important;
    }
    
    /* Progress Bar - Better Visibility */
    .progress {
        background-color: #e9ecef !important;
        height: 30px;
        border: 1px solid #dee2e6;
    }
    
    .progress-bar {
        font-weight: 700;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .progress-text, .progress-bar span {
        color: #000000 !important;
        text-shadow: 0 0 5px rgba(255,255,255,0.9);
        font-weight: 700 !important;
    }
    
    /* Plugin Author Bar */
    .plugin-author-bar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
        padding: 8px 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
    
    .plugin-author {
        font-size: 0.9rem;
        color: var(--bs-secondary-color);
    }
    
    .plugin-author strong {
        font-weight: 600;
        color: var(--bs-emphasis-color);
    }
    
    .github-link {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--bs-body-color);
        text-decoration: none;
        padding: 4px 10px;
        border-radius: 4px;
        transition: all 0.2s ease;
        border: 1px solid var(--bs-border-color);
    }
    
    .github-link:hover {
        background: var(--bs-table-hover-bg);
        color: var(--bs-emphasis-color);
        border-color: var(--bs-emphasis-color);
    }
    
    .github-logo {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }
    
    /* Configuration Details */
    .config-detail {
        padding: 8px 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
    
    .config-detail:last-child {
        border-bottom: none;
    }
    
    .config-detail .label {
        font-weight: 600;
        color: var(--bs-emphasis-color);
        margin-right: 8px;
    }
    
    .config-detail .value {
        color: var(--bs-body-color);
    }
    
    /* Button Improvements */
    .btn {
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    /* Cancel Badge */
    .cancel-badge {
        background-color: #ffc107 !important;
        color: #000000 !important;
        padding: 6px 12px;
        font-weight: 700 !important;
        border-radius: 5px;
        border: 2px solid #e0a800 !important;
    }
</style>

<div class="plugin-author-bar">
    <span class="plugin-author">by <strong>Tarani Debnath</strong></span>
    <a href="https://github.com/tkdebnath/netbox-meraki" target="_blank" class="github-link" title="View on GitHub">
        <svg class="github-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
        </svg>
        <span>GitHub</span>
    </a>
</div>

{% block page_content %}{% endblock %}
{% endblock %}