@extends('layouts.tabler')

@section('page-header')
    <div class="row align-items-center">
        <div class="col">
            <div class="page-pretitle">
                <a href="{{ route('docs.index') }}">← Natrag na dokumentaciju</a>
            </div>
            <h2 class="page-title">
                {{ $title }}
            </h2>
        </div>
    </div>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body markdown">
                {!! $html !!}
            </div>
        </div>
    </div>
</div>

<style>
/* Markdown styling */
.markdown h1 {
    font-size: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

.markdown h2 {
    font-size: 1.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.markdown h3 {
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.markdown p {
    margin-bottom: 1rem;
}

.markdown ul, .markdown ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.markdown li {
    margin-bottom: 0.5rem;
}

.markdown pre {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown code {
    background: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.markdown pre code {
    background: none;
    padding: 0;
}

.markdown table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.markdown table th,
.markdown table td {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}

.markdown table th {
    background: #f8f9fa;
    font-weight: 600;
}

.markdown blockquote {
    border-left: 4px solid #0066ff;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #666;
}

.markdown img {
    max-width: 100%;
    height: auto;
}

.markdown a {
    color: #0066ff;
    text-decoration: none;
}

.markdown a:hover {
    text-decoration: underline;
}
</style>
@endsection