@extends("app.layout.base")

@section("title")
    Vejledninger
@endsection

@section("content")
    <style>
        div.card {
            margin-top: 1rem;
            margin-bottom: 30px;
            width: auto;
            heigt: auto;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        div.header {
            background-color: #00788a;
            color: white;
            padding: 8px;
            font-size: 10px;
            text-align: center;
        }

        div.container {
            padding: 8px;
            text-align: justify;
            line-height: 1.5;
        }

        ol {
            padding-right: 8px;
        }
    </style>
    <main>
        <h1 class="text-center sde-blue mt-0">{{__('msg.vejledning')}}</h1>
        @if(!$guides->isEmpty())
            @foreach($guides as $guide)
                <div class="card">
                    <div class="header">
                        <h3>{{ $guide->name}}</h3>
                    </div>
                    <div class="container">
                        {!! substr($guide->guide_articles, 0, 300) !!}
                        <a style="width: 33%; margin: 0; padding: 0; text-align: center; font-weight: 700;" class="sde-blue" href="{{route("guides.show", ["guide" => $guide->id ])}}">Læs mere</a>
                    </div>
                </div>
            @endforeach
        @else
            <p style="margin: 0 18px;">{{__('msg.dereringenvejledninger')}}.</p>
        @endif
        <button onclick="window.history.back()" class="btn btn-sde-blue text-white mb-1 mt-1" >{{__('msg.tilbage')}}</button>
    </main>
@endsection