@extends('layouts.main')

@section('title', $title)
@section('description', $description)

@section('main.content')
    <div class="container" style="padding-left: 5px; padding-right: 5px;">
        <div class="col-xs-12 col-lg-8">
            <h2 style="text-align: center; margin: 1rem 0;">{{ $article->name }}</h2>
            <div class="banner-horizontal">
                <div>{!! $banners[1] ?? null !!}</div>
            </div>
            <div>
                {!! $article->text !!}
            </div>
            <div class="banner-horizontal">
                <div>{!! $banners[2] ?? null !!}</div>
            </div>
        </div>
        <div class="sidebar hidden-md-down col-lg-4">
            <div class="banner-vertical">
                <div>{!! $banners[4] ?? null !!}</div>
            </div>
            <div class="banner-vertical">
                <div>{!! $banners[5] ?? null !!}</div>
            </div>
        </div>
        @if($openapi_id)
            @push('head')
            <script src="https://vk.com/js/api/openapi.js?136"></script>
            <script type="text/javascript">
              VK.init({
                apiId: {{ $openapi_id }},
                onlyWidgets: true
              });
            </script>
            @endpush
            <div class="col-xs-12" style="padding-left: 0; padding-right: 0;">
                <div id="vk_comments"></div>
                <script type="text/javascript">
                  VK.Widgets.Comments('vk_comments');
                </script>
            </div>
        @endif
    </div>
@overwrite