<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $document->title }} — mtc.</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@1..1000&display=swap">

    <link rel="stylesheet" href="{{ asset('vendor/spec-document/mtc-document.css') }}">

    <style>
        /* Rich-text (editor) content rendered inside a document section. The brand CSS
           only styles the .bullets primitive, so give plain editor lists/paragraphs the
           same reading treatment and proper indentation. */
        .doc-content .doc-richtext p { font-size: 1.0625rem; line-height: 1.75; color: var(--text-2); }
        .doc-content .doc-richtext p + p { margin-top: 1rem; }
        .doc-content .doc-richtext a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 2px; }
        .doc-content .doc-richtext strong { color: var(--text); font-weight: var(--fw-semibold); }
        .doc-content .doc-richtext ul,
        .doc-content .doc-richtext ol { margin: 12px 0; padding-left: 1.6em; }
        .doc-content .doc-richtext ul { list-style: disc; }
        .doc-content .doc-richtext ol { list-style: decimal; }
        .doc-content .doc-richtext li { font-size: 1.0625rem; line-height: 1.75; color: var(--text-2); margin-bottom: 6px; }
        .doc-content .doc-richtext li > ul,
        .doc-content .doc-richtext li > ol { margin: 6px 0; }
    </style>
</head>
<body>

    <aside class="doc-sidebar">
        <img class="s-logo" src="{{ asset('vendor/spec-document/assets/mtc-logo-white.svg') }}" alt="mtc.">
        <p class="s-label">Contents</p>
        <nav class="doc-nav">
            <a href="#cover"><span class="n">00</span> Title</a>
            @foreach ($sections as $index => $section)
                <a href="#section-{{ $section['id'] }}">
                    <span class="n">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span> {{ $section['title'] }}
                </a>
            @endforeach
        </nav>
        <div class="s-foot">
            {{ now()->format('F Y') }}<br>
            <a href="https://mtc.co.uk">mtc.co.uk</a>
        </div>
    </aside>

    <div class="doc-main">

        <section class="doc-cover" id="cover">
            <div class="inner">
                <p class="eyebrow">Requirements Overview</p>
                <h1>{{ $document->title }}</h1>
                @if ($document->tenant?->name)
                    <p class="sub">{{ $document->tenant->name }}</p>
                @endif
                <dl class="doc-meta">
                    @if ($document->version)
                        <div><dt>Version</dt><dd>{{ $document->version }}</dd></div>
                    @endif
                    @if ($document->author?->name)
                        <div><dt>Author</dt><dd>{{ $document->author->name }}</dd></div>
                    @endif
                    @if ($document->isSignedOff())
                        <div><dt>Signed off</dt><dd>{{ $document->signed_off_at->format('d/m/Y') }}</dd></div>
                    @endif
                </dl>
            </div>
        </section>

        <main class="doc-body">
            @forelse ($sections as $index => $section)
                <section class="doc-section" id="section-{{ $section['id'] }}">
                    <p class="overline">Section {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</p>
                    <div class="doc-content">
                        <h2>{{ $section['title'] }}</h2>
                        @include('spec-document._fields', [
                            'fields' => $section['fields'],
                            'data' => $section['data'],
                        ])
                    </div>
                </section>
            @empty
                <section class="doc-section">
                    <div class="doc-content">
                        <h2>No content yet</h2>
                        <p>This spec document has not been filled in yet.</p>
                    </div>
                </section>
            @endforelse
        </main>

    </div>

    <script src="{{ asset('vendor/spec-document/document.js') }}"></script>

</body>
</html>
