@extends('layouts.app')
@section('title', $title = __('topic.index'))
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => $title, 'url' => '']
            ]" />
        </x-slot>

        <x-slot name="right">
            <button type="button" data-modal-target="topic-modal" data-modal-toggle="topic-modal"
                    class="hidden sm:flex items-center space-x-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                     class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                    <path
                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z"/>
                </svg>
                <span class="hidden sm:block">
                    {{ __('topic.add') }}
                </span>
            </button>
            <button type="button" class="sm:hidden fixed bottom-4 right-6 rounded-full text-blue-500 z-40"
                    data-modal-target="topic-modal" data-modal-toggle="topic-modal">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor"
                     class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                    <path
                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z"/>
                </svg>
            </button>
        </x-slot>
    </x-page-header>

    <x-table :$headers :$rows :$actions :data="$topics"/>
    
    @include('topics.create')
@endsection