{{define "content"}}
<div class="leadb2b-kanban-page">
    <div class="leadb2b-kanban-toolbar mb-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="leadb2b-kanban-toolbar__left">
                <p class="text-muted mb-1 small">Funil com 7 estágios fixos. Arraste os cards entre as colunas para atualizar o estágio.</p>
                {{if .Limits}}
                <p class="mb-0 small">
                    <strong>{{.Limits.ActiveLeadsCount}}</strong> leads ativos ·
                    <strong>{{.Limits.SlotsRemaining}}</strong> disponíveis
                </p>
                {{end}}
            </div>
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <div class="input-group input-group-sm leadb2b-kanban-search-wrap">
                    <span class="input-group-text"><i class="feather-search" style="width:14px;height:14px"></i></span>
                    <input type="search" class="form-control" id="app-kanban-search" placeholder="Buscar lead no funil..." autocomplete="off">
                    <button type="button" class="btn btn-outline-secondary d-none" id="app-kanban-search-clear" aria-label="Limpar busca">&times;</button>
                </div>
                <a href="/app/busca" class="site-button-secondry btn-sm"><i class="feather-search"></i> Buscar empresas</a>
                <a href="/app/tags" class="site-button-secondry btn-sm"><i class="feather-tag"></i> Tags</a>
            </div>
        </div>
    </div>

    <div class="panel panel-default site-bg-white leadb2b-kanban-panel">
        <div class="panel-heading wt-panel-heading p-a20 d-flex align-items-center justify-content-between gap-2">
            <h3 class="panel-tittle m-a0"><i class="feather-layout"></i> Funil de prospecção</h3>
            <span class="small text-muted d-none d-md-inline">7 colunas · role ou arraste perto das bordas</span>
        </div>
        <div class="panel-body wt-panel-body p-a20 pt-0">
            <div class="leadb2b-kanban-board-wrap">
                <div class="leadb2b-kanban-board" id="app-kanban-board">
                    {{$page := .}}
                    {{range $i, $st := .KanbanStages}}
                    {{template "kanban-col" dict "root" $page "stage" $st "order" (add $i 1)}}
                    {{end}}
                </div>
            </div>
            <p class="small text-muted mb-0 mt-3 d-none" id="app-kanban-empty-filter">Nenhum lead corresponde à busca.</p>
        </div>
    </div>
</div>
{{end}}

{{define "kanban-col"}}
{{$root := index . "root"}}
{{$st := index . "stage"}}
{{$order := index . "order"}}
{{$cards := index $root.Kanban $st.Code}}
<div class="leadb2b-kanban-col" data-stage="{{$st.Code}}" style="--kanban-stage-color: {{$st.Color}}">
    <div class="leadb2b-kanban-column leadb2b-kanban-column--{{$st.Code}}{{if $st.Terminal}} leadb2b-kanban-column--terminal{{end}}{{if not $cards}} leadb2b-kanban-column--empty{{end}}">
        <div class="leadb2b-kanban-column__head">
            <span class="leadb2b-kanban-column__order" aria-hidden="true">{{$order}}</span>
            <div class="leadb2b-kanban-column__titles">
                <h6 class="leadb2b-kanban-title mb-0">{{$st.Label}}</h6>
                <span class="leadb2b-kanban-column__hint">{{$st.Hint}}</span>
            </div>
            <span class="leadb2b-kanban-count" data-count-for="{{$st.Code}}">{{len $cards}}</span>
        </div>
        <div class="leadb2b-kanban-dropzone" data-stage="{{$st.Code}}">
            {{range $cards}}
            <div class="leadb2b-kanban-card" draggable="true" data-lead-id="{{.ID}}" data-stage="{{$st.Code}}" data-search="{{with .CompanyName}}{{.}}{{else}}Lead{{end}} {{with .City}}{{.}}{{end}} {{with .UF}}{{.}}{{end}} {{with .ResponsibleName}}{{.}}{{end}}{{range .Tags}} {{.Name}}{{end}}{{with .Notes}} {{.}}{{end}}">
                <div class="leadb2b-kanban-card__grip" aria-hidden="true" title="Arrastar"><i class="feather-move"></i></div>
                <div class="leadb2b-kanban-card__body">
                    <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
                        <a href="/app/leads/{{.ID}}" class="leadb2b-kanban-card-title" draggable="false">{{with .CompanyName}}{{.}}{{else}}Lead{{end}}</a>
                        {{if .Temperature}}
                        <span class="leadb2b-temp-pill {{temperatureClass .Temperature}}" title="{{temperatureLabel .Temperature}} ({{derefInt .Temperature 0}})">{{derefInt .Temperature 0}}</span>
                        {{end}}
                    </div>
                    <div class="small text-muted">{{with .City}}{{.}}{{end}}{{if .UF}}/{{.UF}}{{end}}</div>
                    {{if .ResponsibleName}}<div class="small mt-1"><i class="feather-user" style="width:14px;height:14px"></i> {{.ResponsibleName}}</div>{{end}}
                    {{if .Tags}}
                    <div class="leadb2b-kanban-tags mt-2">
                        {{range .Tags}}<span class="leadb2b-tag-badge" style="background:{{.Color}}22;color:{{.Color}};border-color:{{.Color}}44">{{.Name}}</span>{{end}}
                    </div>
                    {{end}}
                    {{if or .Phones .Emails}}
                    <div class="small text-muted mt-2">
                        {{if .Phones}}<span class="me-2"><i class="feather-phone" style="width:14px;height:14px"></i> {{index .Phones 0}}{{if gt (len .Phones) 1}} +{{add (len .Phones) -1}}{{end}}</span>{{end}}
                        {{if .Emails}}<span><i class="feather-mail" style="width:14px;height:14px"></i> {{index .Emails 0}}{{if gt (len .Emails) 1}} +{{add (len .Emails) -1}}{{end}}</span>{{end}}
                    </div>
                    {{else if or .HasPhone .HasEmail}}
                    <div class="small text-muted mt-2">
                        {{if .HasPhone}}<span class="me-2"><i class="feather-phone" style="width:14px;height:14px"></i> tel.</span>{{end}}
                        {{if .HasEmail}}<span><i class="feather-mail" style="width:14px;height:14px"></i> e-mail</span>{{end}}
                    </div>
                    {{end}}
                    {{if .Notes}}<p class="small text-muted mb-0 mt-2 leadb2b-kanban-notes">{{.Notes}}</p>{{end}}
                </div>
            </div>
            {{end}}
            <div class="leadb2b-kanban-placeholder">
                <span class="leadb2b-kanban-placeholder__label">Nenhum lead</span>
                <span class="leadb2b-kanban-placeholder__hint">Arraste cards para {{$st.Label}}</span>
            </div>
        </div>
    </div>
</div>
{{end}}