{% extends 'core/base.html' %}

{% block content %}
<style>
    .global-summary-card {
        position: relative;
        width: 100%;
        padding: 24px;
        margin-bottom: 34px;
        overflow: hidden;

        background:
            linear-gradient(
                145deg,
                rgba(245, 158, 11, 0.075),
                #111827 42%,
                #111827
            );

        border: 1px solid rgba(245, 158, 11, 0.42);
        border-radius: 12px;

        box-shadow:
            0 5px 18px rgba(0, 0, 0, 0.28),
            0 0 18px rgba(245, 158, 11, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }

    .global-summary-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #f59e0b, #fb923c);
    }

    .global-summary-title {
        margin: 0 0 22px;
        font-size: 22px;
        color: #fbbf24;
    }

    .global-summary-section {
        margin-bottom: 26px;
    }

    .global-summary-section:last-child {
        margin-bottom: 0;
    }

    .global-summary-section-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .global-summary-section-head h3 {
        margin: 0;
        font-size: 16px;
        color: #e2e8f0;
        white-space: nowrap;
    }

    .global-summary-section-line {
        flex: 1;
        height: 1px;
        background: rgba(245, 158, 11, 0.28);
    }

    .global-summary-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px 22px;
    }

    .global-stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 9px 0;
        border-bottom: 1px solid rgba(51, 65, 85, 0.65);
    }

    .global-stat span {
        min-width: 0;
        color: #94a3b8;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .global-stat strong {
        flex-shrink: 0;
        color: #fbbf24;
        font-size: 17px;
    }

    .organization-cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .organization-card {
        --org-color: #60a5fa;

        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        padding: 18px;
        overflow: hidden;
        text-decoration: none;

        background:
            linear-gradient(
                145deg,
                color-mix(in srgb, var(--org-color) 9%, #111827),
                #111827 70%
            );

        border: 1px solid
            color-mix(in srgb, var(--org-color) 42%, #334155);

        border-radius: 10px;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.025);

        transition:
            transform 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease;
    }

    .organization-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--org-color);
    }

    .organization-card:hover {
        transform: translateY(-2px);
        border-color: var(--org-color);
        box-shadow:
            0 7px 18px rgba(0, 0, 0, 0.3),
            0 0 10px color-mix(in srgb, var(--org-color) 15%, transparent);
    }

    .organization-card > strong {
        color: #ffffff;
        font-size: 16px;
    }

    .organization-card > span {
        color: var(--org-color);
        font-size: 13px;
        font-weight: 600;
    }

    .organization-card-counters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid color-mix(in srgb, var(--org-color) 24%, #334155);
    }

    .organization-card-counter {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        font-size: 12px;
        color: #94a3b8;
    }

    .organization-card-counter span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #94a3b8;
        font-weight: 400;
    }

    .organization-card-counter strong {
        color: #ffffff;
        font-size: 12px;
        flex-shrink: 0;
    }

    .organization-card:nth-child(10n + 1) { --org-color: #60a5fa; }
    .organization-card:nth-child(10n + 2) { --org-color: #22d3ee; }
    .organization-card:nth-child(10n + 3) { --org-color: #22c55e; }
    .organization-card:nth-child(10n + 4) { --org-color: #a78bfa; }
    .organization-card:nth-child(10n + 5) { --org-color: #fb923c; }
    .organization-card:nth-child(10n + 6) { --org-color: #f472b6; }
    .organization-card:nth-child(10n + 7) { --org-color: #facc15; }
    .organization-card:nth-child(10n + 8) { --org-color: #2dd4bf; }
    .organization-card:nth-child(10n + 9) { --org-color: #f87171; }
    .organization-card:nth-child(10n + 10) { --org-color: #818cf8; }

    @media (max-width: 1400px) {
        .global-summary-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (max-width: 1050px) {
        .global-summary-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .organization-cards {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 800px) {
        .global-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .organization-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 520px) {
        .global-summary-grid {
            grid-template-columns: 1fr;
        }

        .organization-cards {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="page-head">
    <div>
        <h1>Dashboard</h1>
        <p>Analytics across the organizations available to your account.</p>
    </div>
</div>

{% if perms.core.killian_org_view %}
<div class="global-summary-card">
    <h2 class="global-summary-title">Global Analytics</h2>

    {% if perms.core.killian_kb_view or perms.core.killian_credentials_view or perms.core.killian_contacts_view or perms.core.killian_locations_view %}
    <div class="global-summary-section">
        <div class="global-summary-section-head">
            <h3>Organization &amp; Documentation</h3>
            <div class="global-summary-section-line"></div>
        </div>
        <div class="global-summary-grid">
            <div class="global-stat"><span>Organizations</span><strong>{{ counts.organizations }}</strong></div>
            {% if perms.core.killian_kb_view %}<div class="global-stat"><span>Documents</span><strong>{{ counts.documents }}</strong></div>{% endif %}
            {% if perms.core.killian_credentials_view %}<div class="global-stat"><span>Credentials</span><strong>{{ counts.credentials }}</strong></div>{% endif %}
            {% if perms.core.killian_contacts_view %}<div class="global-stat"><span>Contacts</span><strong>{{ counts.contacts }}</strong></div>{% endif %}
            {% if perms.core.killian_locations_view %}<div class="global-stat"><span>Locations</span><strong>{{ counts.locations }}</strong></div>{% endif %}
        </div>
    </div>
    {% else %}
    <div class="global-summary-section">
        <div class="global-summary-grid">
            <div class="global-stat"><span>Organizations</span><strong>{{ counts.organizations }}</strong></div>
        </div>
    </div>
    {% endif %}

    {% if perms.core.killian_assets_view or perms.core.killian_subnets_view or perms.core.killian_wireless_view or perms.core.killian_firewall_router_view or perms.core.killian_configurations_view or perms.core.killian_domains_view or perms.core.killian_licenses_view %}
    <div class="global-summary-section">
        <div class="global-summary-section-head">
            <h3>Infrastructure</h3>
            <div class="global-summary-section-line"></div>
        </div>
        <div class="global-summary-grid">
            {% if perms.core.killian_assets_view %}<div class="global-stat"><span>Assets</span><strong>{{ counts.assets }}</strong></div>{% endif %}
            {% if perms.core.killian_subnets_view %}<div class="global-stat"><span>Networks</span><strong>{{ counts.networks }}</strong></div>{% endif %}
            {% if perms.core.killian_wireless_view %}<div class="global-stat"><span>Wireless</span><strong>{{ counts.wireless }}</strong></div>{% endif %}
            {% if perms.core.killian_firewall_router_view %}<div class="global-stat"><span>Firewalls / Routers</span><strong>{{ counts.firewalls }}</strong></div>{% endif %}
            {% if perms.core.killian_configurations_view %}<div class="global-stat"><span>Configurations</span><strong>{{ counts.configurations }}</strong></div>{% endif %}
            {% if perms.core.killian_domains_view %}<div class="global-stat"><span>Domains</span><strong>{{ counts.domains }}</strong></div>{% endif %}
            {% if perms.core.killian_licenses_view %}<div class="global-stat"><span>Licenses</span><strong>{{ counts.licenses }}</strong></div>{% endif %}
        </div>
    </div>
    {% endif %}

    {% if perms.core.killian_active_directory_view or perms.core.killian_applications_view or perms.core.killian_backups_view or perms.core.killian_email_view or perms.core.killian_file_sharing_view or perms.core.killian_internet_provider_view or perms.core.killian_microsoft_licensing_view or perms.core.killian_printing_view or perms.core.killian_vendors_view or perms.core.killian_virtualization_view %}
    <div class="global-summary-section">
        <div class="global-summary-section-head">
            <h3>Apps &amp; Services</h3>
            <div class="global-summary-section-line"></div>
        </div>
        <div class="global-summary-grid">
            {% if perms.core.killian_active_directory_view %}<div class="global-stat"><span>Active Directory</span><strong>{{ counts.active_directory }}</strong></div>{% endif %}
            {% if perms.core.killian_applications_view %}<div class="global-stat"><span>Applications</span><strong>{{ counts.applications }}</strong></div>{% endif %}
            {% if perms.core.killian_backups_view %}<div class="global-stat"><span>Backups</span><strong>{{ counts.backups }}</strong></div>{% endif %}
            {% if perms.core.killian_email_view %}<div class="global-stat"><span>Email Systems</span><strong>{{ counts.email }}</strong></div>{% endif %}
            {% if perms.core.killian_file_sharing_view %}<div class="global-stat"><span>File Sharing</span><strong>{{ counts.file_sharing }}</strong></div>{% endif %}
            {% if perms.core.killian_internet_provider_view %}<div class="global-stat"><span>Internet Providers</span><strong>{{ counts.internet_providers }}</strong></div>{% endif %}
            {% if perms.core.killian_microsoft_licensing_view %}<div class="global-stat"><span>Microsoft Licensing</span><strong>{{ counts.microsoft_licenses }}</strong></div>{% endif %}
            {% if perms.core.killian_printing_view %}<div class="global-stat"><span>Printing</span><strong>{{ counts.printing }}</strong></div>{% endif %}
            {% if perms.core.killian_vendors_view %}<div class="global-stat"><span>Vendors</span><strong>{{ counts.vendors }}</strong></div>{% endif %}
            {% if perms.core.killian_virtualization_view %}<div class="global-stat"><span>Virtualization</span><strong>{{ counts.virtualization }}</strong></div>{% endif %}
        </div>
    </div>
    {% endif %}
</div>

<section>
    <h2>Organizations</h2>
    <div class="organization-cards">
        {% for row in organization_rows %}
        <a class="organization-card" href="{% url 'org_detail' row.org.pk %}">
            <strong>{{ row.org.name }}</strong>
            <span>{{ row.org.status }}</span>
            <div class="organization-card-counters">
                {% if perms.core.killian_kb_view %}<div class="organization-card-counter"><span>Documents</span><strong>{{ row.counts.documents }}</strong></div>{% endif %}
                {% if perms.core.killian_assets_view %}<div class="organization-card-counter"><span>Assets</span><strong>{{ row.counts.assets }}</strong></div>{% endif %}
                {% if perms.core.killian_credentials_view %}<div class="organization-card-counter"><span>Credentials</span><strong>{{ row.counts.credentials }}</strong></div>{% endif %}
                {% if perms.core.killian_contacts_view %}<div class="organization-card-counter"><span>Contacts</span><strong>{{ row.counts.contacts }}</strong></div>{% endif %}
                {% if perms.core.killian_locations_view %}<div class="organization-card-counter"><span>Locations</span><strong>{{ row.counts.locations }}</strong></div>{% endif %}
                {% if perms.core.killian_subnets_view %}<div class="organization-card-counter"><span>Networks</span><strong>{{ row.counts.networks }}</strong></div>{% endif %}
                {% if perms.core.killian_wireless_view %}<div class="organization-card-counter"><span>Wireless</span><strong>{{ row.counts.wireless }}</strong></div>{% endif %}
                {% if perms.core.killian_firewall_router_view %}<div class="organization-card-counter"><span>Firewalls / Routers</span><strong>{{ row.counts.firewalls }}</strong></div>{% endif %}
                {% if perms.core.killian_configurations_view %}<div class="organization-card-counter"><span>Configurations</span><strong>{{ row.counts.configurations }}</strong></div>{% endif %}
                {% if perms.core.killian_domains_view %}<div class="organization-card-counter"><span>Domains</span><strong>{{ row.counts.domains }}</strong></div>{% endif %}
                {% if perms.core.killian_licenses_view %}<div class="organization-card-counter"><span>Licenses</span><strong>{{ row.counts.licenses }}</strong></div>{% endif %}
                {% if perms.core.killian_active_directory_view %}<div class="organization-card-counter"><span>Active Directory</span><strong>{{ row.counts.active_directory }}</strong></div>{% endif %}
                {% if perms.core.killian_applications_view %}<div class="organization-card-counter"><span>Applications</span><strong>{{ row.counts.applications }}</strong></div>{% endif %}
                {% if perms.core.killian_backups_view %}<div class="organization-card-counter"><span>Backups</span><strong>{{ row.counts.backups }}</strong></div>{% endif %}
                {% if perms.core.killian_email_view %}<div class="organization-card-counter"><span>Email Systems</span><strong>{{ row.counts.email }}</strong></div>{% endif %}
                {% if perms.core.killian_file_sharing_view %}<div class="organization-card-counter"><span>File Sharing</span><strong>{{ row.counts.file_sharing }}</strong></div>{% endif %}
                {% if perms.core.killian_internet_provider_view %}<div class="organization-card-counter"><span>Internet Providers</span><strong>{{ row.counts.internet_providers }}</strong></div>{% endif %}
                {% if perms.core.killian_microsoft_licensing_view %}<div class="organization-card-counter"><span>Microsoft Licensing</span><strong>{{ row.counts.microsoft_licenses }}</strong></div>{% endif %}
                {% if perms.core.killian_printing_view %}<div class="organization-card-counter"><span>Printing</span><strong>{{ row.counts.printing }}</strong></div>{% endif %}
                {% if perms.core.killian_vendors_view %}<div class="organization-card-counter"><span>Vendors</span><strong>{{ row.counts.vendors }}</strong></div>{% endif %}
                {% if perms.core.killian_virtualization_view %}<div class="organization-card-counter"><span>Virtualization</span><strong>{{ row.counts.virtualization }}</strong></div>{% endif %}
            </div>
        </a>
        {% empty %}
        <p>No organizations are assigned to your account.</p>
        {% endfor %}
    </div>
</section>
{% else %}
<div class="empty-state">
    <h3>No organization access</h3>
    <p>Your role does not currently grant access to organization workspaces.</p>
</div>
{% endif %}
{% endblock %}