@extends('layouts.web')

@section('title', $article->title)
@section('content')

    <section class="teaser teaser--small" style="background-image: url({{ asset('images/teaser-allison-transmission.jpg') }});">

        <div class="container d-flex flex-column flex-lg-row align-items-center justify-content-center justify-content-lg-between text-center text-lg-left">
            <h1 class="teaser__title">{{ $article->title }}</h1>
            <a href="#" class="teaser__logo">
                <img class="logo logo--allison-teaser lazy" data-src="{{ asset('images/logo-allison-transmission.svg') }}" alt="">
            </a>
        </div>

    </section>

    @include('layouts.includes.nav')

    <section class="section space-p-b-100 article-detail">

        <!-- Circle -->
        <img data-src="{{ asset('images/circle.svg') }}" alt="" class="circle lazy">

        <div class="container text-center text-lg-left">

            <!-- Breadcrumb -->
            <ul class="breadcrumb list list--no-style">
                <li class="breadcrumb__item text--semi-small">
                    <a href="{{ route('web.articles') }}" class="link link--underline">{{ webText('aboutUs.whatDidWeDo.title') }}</a>
                </li>
                <li class="breadcrumb__item text--semi-small">
                    {{ $article->title }} ({{ $article->created_at->format('j.n.Y') }})
                </li>
            </ul>

            <h2 class="h2">{{ $article->title }}</h2>

            @if($article->image)
                <img src="{{ asset('images/articles/' . $article->image) }}" style="max-width: 100%" class="space-m-b-15">
            @endif

            {!! $article->content !!}

        </div>

        <div class="container text-center">
            <a href="{{ route('web.articles') }}" class="btn btn--gradient">{{ webText('articles.archive') }}</a>
        </div>

    </section>
@endsection