@extends('layouts.app')

@section('title', 'Kullanım Kılavuzu')

@section('content')
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-book me-2 text-primary"></i> Kullanım Kılavuzu</h1>
    <div class="btn-group">
        <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary"><i class="bi bi-house me-1"></i> Dashboard</a>
        <a href="{{ asset('docs/intro-and-user-guides.md') }}" class="btn btn-outline-primary" download><i class="bi bi-download me-1"></i> Markdown İndir</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div id="md-content" class="markdown-body"></div>
    </div>
</div>

{{-- Minimal styling for markdown --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown.min.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    (function(){
        const raw = @json($content);
        const html = marked.parse(raw);
        document.getElementById('md-content').innerHTML = html;
    })();
</script>
@endsection