@extends('layouts.app')

@section('content')

<h1>{{ $topic->name }}</h1>
<p>{{ $topic->description }}</p>
<div class="row text-center">
    <div class="col-md-3">
        <strong class="d-block">Icon</strong>
        <img class="mb-2 img-fluid" src="{{ env('MEDIA_URL') . $topic->icon }}" alt="">
    </div>
    <div class="col-md-3">
        <strong class="d-block">Cover VR</strong>
        <img class="mb-2 img-fluid" src="{{ env('MEDIA_URL') . $topic->cover_vr }}" alt="">
    </div>
    <div class="col-md-3">
        <strong class="d-block">Cover small</strong>
        <img class="mb-2 img-fluid" src="{{ env('MEDIA_URL') . $topic->cover_small }}" alt="">
    </div>
    <div class="col-md-3">
        <strong class="d-block">Cover large</strong>
        <img class="mb-2 img-fluid" src="{{ env('MEDIA_URL') . $topic->cover_large }}" alt="">
    </div>
</div>
<p><a href="{{ url('topics') }}">< {{ __('Topics') }}</a></p>
<hr>
<h3>{{ __('Subtopics') }}</h3>
<div class="row">
    <div class="col text-right">
        <a href="{{ url('topic/' . $topic->id . '/create') }}" class="btn btn-secondary mb-2">{{ __('Create subtopic') }}</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" class="text-center">{{ __('Actions') }}</th>
        </tr>
    </thead>
    <tbody>
    @foreach($topic->subtopics as $subtopic)
    <tr>
        <td scope="row" class="pt-4">{{ $subtopic->name }}</td>
        <td scope="row" class="pt-4">{{ str_limit($subtopic->description, $limit = 150, $end = '...') }}</td>
        <td scope="row" class="pt-4 text-center">
            <a href="{{ route('subtopic_edit', $subtopic->id) }}" class="mr-2"><i class="far fa-edit"></i></a>
            <a href="{{ route('subtopic_delete', $subtopic->id) }}" class="confirmation"><i class="red fas fa-trash"></i></a>
        </td>
    </tr>
    @endforeach
    </tbody>
</table>

@endsection