@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col text-right">
        <a href="{{ url('topics/create') }}" class="btn btn-secondary mb-2">{{ __('Add topic') }}</a>
    </div>
</div>
<table class="table table-striped table-responsive-sm">
    <thead>
        <tr>
            <th scope="col">{{ __('Name') }}</th>
            <th scope="col">{{ __('Description') }}</th>
            <th scope="col">{{ __('Subtopics') }}</th>
            <th scope="col" class="text-center">{{ __('Actions') }}</th>
        </tr>
    </thead>
    <tbody>
    @foreach($topics as $topic)
    <tr>
        <td scope="row" class="pt-4"><a href="{{ url('topic/' . $topic->id) }}">{{ $topic->name }}</a></td>
        <td scope="row" class="pt-4">{{ str_limit($topic->description, $limit = 150, $end = '...') }}</td>
        <td scope="row" class="pt-4">{{ $topic->subtopics()->count() }}</td>
        <td scope="row" class="pt-4 text-center">
            <a href="{{ route('topic_edit', $topic->id) }}" class="mr-2"><span class="icon icon-edit"><i></i></span></a>
            <a href="{{ route('topic_delete', $topic->id) }}" class="confirmation"><span class="icon icon-trash"><i></i></span></a>
        </td>
    </tr>
    @endforeach
    </tbody>
</table>

@endsection