bmc_hub/app/ticket/frontend/mockups/option2_kanban.html

{% extends "shared/frontend/base.html" %}

{% block title %}Concept 2: Kanban Board - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .kanban-board {
        display: flex;
        height: 100%;
        padding: 1.5rem;
        gap: 1.5rem;
        overflow-x: auto;
    }

    .kanban-column {
        width: 320px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        background: transparent;
        height: 100%;
    }

    .column-header {
        padding: 0.5rem 0.5rem 1rem 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .column-content {
        flex-grow: 1;
        overflow-y: auto;
        padding-right: 0.5rem; /* Space for scrollbar */
    }

    .kanban-card {
        background: var(--bg-card);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        cursor: grab;
        transition: transform 0.2s, box-shadow 0.2s;
        border-left: 4px solid transparent;
    }

    .kanban-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .kanban-card:active {
        cursor: grabbing;
    }

    /* Priority Borders */
    .priority-high { border-left-color: var(--warning); }
    .priority-critical { border-left-color: var(--danger); }
    .priority-normal { border-left-color: var(--info); }
    .priority-low { border-left-color: var(--text-secondary); }

    .card-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.75rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .card-tags {
        display: flex;
        gap: 0.25rem;
        margin-top: 0.5rem;
    }

    .tag {
        background: var(--bg-body);
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        font-size: 0.7rem;
        color: var(--text-secondary);
    }

    .add-card-btn {
        background: transparent;
        border: 2px dashed rgba(0,0,0,0.1);
        color: var(--text-secondary);
        width: 100%;
        padding: 0.75rem;
        border-radius: 8px;
        margin-top: 0.5rem;
        transition: all 0.2s;
    }

    .add-card-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(15, 76, 117, 0.05);
    }
</style>
{% endblock %}

{% block content_wrapper %}
<div class="container-fluid p-0" style="height: calc(100vh - 80px); overflow: hidden;">
<div class="kanban-board">
    <!-- Column: Ny -->
    <div class="kanban-column">
        <div class="column-header">
            <span><i class="bi bi-circle text-info me-2"></i>Ny</span>
            <span class="badge bg-secondary bg-opacity-10 text-secondary">3</span>
        </div>
        <div class="column-content">
            <div class="kanban-card priority-critical">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">#TKT-005</small>
                    <i class="bi bi-three-dots text-muted"></i>
                </div>
                <h6 class="mb-2">Server nede i produktion</h6>
                <div class="card-tags">
                    <span class="tag">Server</span>
                    <span class="tag">Kritisk</span>
                </div>
                <div class="card-meta">
                    <div class="d-flex align-items-center gap-1">
                        <img src="https://ui-avatars.com/api/?name=Fabrik+A/S&background=random" class="rounded-circle" width="16">
                        <span>Fabrik A/S</span>
                    </div>
                    <span>10m</span>
                </div>
            </div>

            <div class="kanban-card priority-normal">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">#TKT-008</small>
                    <i class="bi bi-three-dots text-muted"></i>
                </div>
                <h6 class="mb-2">Ny medarbejder oprettelse</h6>
                <div class="card-meta">
                    <div class="d-flex align-items-center gap-1">
                        <img src="https://ui-avatars.com/api/?name=Kontor+ApS&background=random" class="rounded-circle" width="16">
                        <span>Kontor ApS</span>
                    </div>
                    <span>2t</span>
                </div>
            </div>
            
            <button class="add-card-btn"><i class="bi bi-plus"></i> Tilføj kort</button>
        </div>
    </div>

    <!-- Column: I Gang -->
    <div class="kanban-column">
        <div class="column-header">
            <span><i class="bi bi-play-circle text-warning me-2"></i>I Gang</span>
            <span class="badge bg-secondary bg-opacity-10 text-secondary">2</span>
        </div>
        <div class="column-content">
            <div class="kanban-card priority-high">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">#TKT-002</small>
                    <img src="https://ui-avatars.com/api/?name=Christian&background=0f4c75&color=fff" class="rounded-circle" width="20" title="Assigned to Christian">
                </div>
                <h6 class="mb-2">Netværksproblem hovedkontor</h6>
                <div class="card-tags">
                    <span class="tag">Netværk</span>
                </div>
                <div class="card-meta">
                    <div class="d-flex align-items-center gap-1">
                        <img src="https://ui-avatars.com/api/?name=Tech+Corp&background=random" class="rounded-circle" width="16">
                        <span>Tech Corp</span>
                    </div>
                    <span>1d</span>
                </div>
            </div>

            <div class="kanban-card priority-normal">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">#TKT-004</small>
                    <img src="https://ui-avatars.com/api/?name=Morten&background=random" class="rounded-circle" width="20" title="Assigned to Morten">
                </div>
                <h6 class="mb-2">Opdatering af firewall</h6>
                <div class="card-meta">
                    <div class="d-flex align-items-center gap-1">
                        <img src="https://ui-avatars.com/api/?name=Sikkerhed+A/S&background=random" class="rounded-circle" width="16">
                        <span>Sikkerhed A/S</span>
                    </div>
                    <span>3d</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Column: Venter på Kunde -->
    <div class="kanban-column">
        <div class="column-header">
            <span><i class="bi bi-pause-circle text-secondary me-2"></i>Venter</span>
            <span class="badge bg-secondary bg-opacity-10 text-secondary">4</span>
        </div>
        <div class="column-content">
            {% for i in range(4) %}
            <div class="kanban-card priority-low">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">#TKT-01{{i}}</small>
                    <i class="bi bi-three-dots text-muted"></i>
                </div>
                <h6 class="mb-2">Bestilling af hardware {{i}}</h6>
                <div class="card-meta">
                    <div class="d-flex align-items-center gap-1">
                        <img src="https://ui-avatars.com/api/?name=Kunde+{{i}}&background=random" class="rounded-circle" width="16">
                        <span>Kunde {{i}}</span>
                    </div>
                    <span>5d</span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Column: Løst -->
    <div class="kanban-column">
        <div class="column-header">
            <span><i class="bi bi-check-circle text-success me-2"></i>Løst</span>
            <span class="badge bg-secondary bg-opacity-10 text-secondary">12</span>
        </div>
        <div class="column-content">
            <div class="kanban-card priority-normal opacity-75">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted">#TKT-001</small>
                    <i class="bi bi-check-lg text-success"></i>
                </div>
                <h6 class="mb-2 text-decoration-line-through">Printer installation</h6>
                <div class="card-meta">
                    <div class="d-flex align-items-center gap-1">
                        <img src="https://ui-avatars.com/api/?name=Advokat&background=random" class="rounded-circle" width="16">
                        <span>Advokat</span>
                    </div>
                    <span>1u</span>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}