@extends('layouts.app')
@section('title', 'Tags')

@section('content')
    <x-page-header title="Tags" lede="Labels you can attach to contacts, leads and deals." />

    <div class="tabs">
        <a href="{{ route('app.settings.index') }}">Organisation</a>
        @can('pipelines.manage')<a href="{{ route('app.settings.pipelines') }}">Pipelines</a>@endcan
        <a class="active" href="{{ route('app.settings.tags') }}">Tags</a>
    </div>

    <div class="grid two">
        <x-card title="Your tags" :flush="true">
            @forelse ($tags as $tag)
                <div class="row between" style="padding:11px 18px;border-bottom:1px solid var(--line)">
                    <span><x-badge :tone="$tag->colour_token">{{ $tag->name }}</x-badge></span>
                    <span class="row">
                        <span class="small muted">{{ $tag->contacts_count }} contacts</span>
                        <form method="POST" action="{{ route('app.settings.tags.destroy', $tag) }}" data-confirm="Remove {{ $tag->name }}?">
                            @csrf @method('DELETE')
                            <button class="btn small danger" type="submit">Remove</button>
                        </form>
                    </span>
                </div>
            @empty
                <x-empty title="No tags yet" message="Tags are the fastest way to slice a list that filters cannot describe." />
            @endforelse
        </x-card>

        <x-card title="Add a tag">
            <form method="POST" action="{{ route('app.settings.tags.store') }}">
                @csrf
                <x-field name="name" label="Name" required placeholder="Enterprise" />
                <x-field name="colour_token" label="Colour" type="select" :options="[
                    'muted' => 'Grey', 'info' => 'Blue', 'positive' => 'Green',
                    'warning' => 'Amber', 'negative' => 'Red',
                ]" required />
                <button class="btn primary" type="submit">Add tag</button>
            </form>
        </x-card>
    </div>
@endsection