@extends('layout')

@section('title', $article->getFirstNonEmptyTranslation('title'))
@section('meta_description', $article->getFirstNonEmptyTranslation('meta_description') ?: \Illuminate\Support\Str::limit(strip_tags(app(\App\Services\Content\EditorJsRenderer::class)->render($article->getFirstNonEmptyTranslation('content'))), 160))

@section('content')
<div class="container py-5">
    <article>
        <header class="mb-4">
            <h1>{{ $article->getFirstNonEmptyTranslation('title') }}</h1>
            <small class="text-muted">
                <i class="fas fa-eye"></i> {{ $article->view_count }} ·
                <i class="fas fa-thumbs-up text-success"></i> {{ $article->helpful_count }} ·
                <i class="fas fa-thumbs-down text-danger"></i> {{ $article->not_helpful_count }}
            </small>

            @if ($article->tags->isNotEmpty())
                <div class="mt-2">
                    @foreach ($article->tags as $tag)
                        <a href="{{ lroute('knowledgebase.index', ['tag' => $tag->slug]) }}"
                           class="badge text-decoration-none"
                           style="background-color: {{ $tag->color ?? '#6c757d' }}">
                            @if ($tag->icon)<i class="fas {{ $tag->icon }}"></i> @endif
                            {{ $tag->getFirstNonEmptyTranslation('name') }}
                        </a>
                    @endforeach
                </div>
            @endif
        </header>

        <div class="content">
            {!! app(\App\Services\Content\EditorJsRenderer::class)->render(
                $article->getTranslation('content', app()->getLocale())
            ) !!}
        </div>

        <hr class="my-4">

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="text-center">
            <p class="mb-3">{{ __('store.kb_was_helpful') }}</p>
            <form method="POST" action="{{ lroute('knowledgebase.vote', $article->getLocaleSlug(app()->getLocale())) }}" class="d-inline">
                @csrf
                <button type="submit" name="vote" value="helpful" class="btn btn-outline-success me-2">
                    <i class="fas fa-thumbs-up"></i> {{ __('store.kb_helpful') }} ({{ $article->helpful_count }})
                </button>
                <button type="submit" name="vote" value="not_helpful" class="btn btn-outline-danger">
                    <i class="fas fa-thumbs-down"></i> {{ __('store.kb_not_helpful') }} ({{ $article->not_helpful_count }})
                </button>
            </form>
        </div>
    </article>

    @if ($related->isNotEmpty())
        <hr class="my-5">
        <h3>{{ __('store.posts_related') }}</h3>
        <div class="row">
            @foreach ($related as $rel)
                <div class="col-md-6 mb-3">
                    <a href="{{ lroute('knowledgebase.show', $rel->getLocaleSlug(app()->getLocale())) }}">
                        {{ $rel->getFirstNonEmptyTranslation('title') }}
                    </a>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection
