@extends('docs.layout')

@section('title', $document['title'])

@section('content')
<div class="docs-article">
    <div class="docs-crumb">
        <a href="{{ route('project-docs.index') }}">Docs</a>
        <span>/</span>
        <span>{{ $document['group'] }}</span>
        <span>/</span>
        <span>{{ ucfirst($document['source']) }}</span>
    </div>

    <header class="docs-article-head">
        <div class="docs-kicker">{{ strtoupper($document['source']) }} · {{ strtoupper($document['group']) }}</div>
        <h1>{{ $document['title'] }}</h1>
        <p>{{ $document['description'] }}</p>

        <div class="docs-meta">
            <span>
                Source:
                <code>
                    {{ $document['source'] === 'flutter' ? 'flutter/docs/'.$document['file'] : 'docs/'.$document['file'] }}
                </code>
            </span>

            @if($modifiedAt)
                <span>Updated: {{ date('d M Y · H:i', $modifiedAt) }}</span>
            @endif

            @if(!empty($document['section']))
                <span>Section: <code>{{ $document['section'] }}</code></span>
            @endif
        </div>
    </header>

    <article class="docs-prose">
        {!! $html !!}
    </article>

    <div class="docs-page-nav">
        <div>
            @if($previousDocument)
                <a href="{{ route('project-docs.show', $previousDocument['slug']) }}" class="docs-page-link">
                    <small>Previous</small>
                    <strong>← {{ $previousDocument['title'] }}</strong>
                </a>
            @endif
        </div>

        <div>
            @if($nextDocument)
                <a href="{{ route('project-docs.show', $nextDocument['slug']) }}" class="docs-page-link next">
                    <small>Next</small>
                    <strong>{{ $nextDocument['title'] }} →</strong>
                </a>
            @endif
        </div>
    </div>
</div>
@endsection