@extends('layouts.'.env('THEME'))

@section('content')

<div class="container" id="main-container">

    <div class="row mt-5">
        <div class="col-md-6 col-12">
            <div class="card border-dark">
                <h1 class="card-header border-dark" style="font-size: 1.2rem;">
                    {!! $area->name !!}
                </h1>
                <div class="card-body">
                    <div class="row p-3">
                        <h2 class="mt-0" style="font-size: 1.1rem;">
                            FTTP fast gigabit internet service
                        </h2>
                        <p>{!! $area->description !!}</p>
                        <div class="mb-2">
                            {!! $area->postcodeDisplay() !!}
                        </div><br />
                        <a href="/news">
                            <i class="fas fa-chevron-circle-left"></i> Back to all news
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-12">
            <div class="list-group">
                @if($area->isVoucher())
                <a href="/signup?referrer=area{{$area->id}}" class="list-group-item list-group-item-action active">
                    @if($area->state < 11)
                    <i class="fas fa-check"></i> We are waiting for our voucher project to be approved to make installation free. Click to get started.
                    @else
                    <i class="fas fa-check"></i> Property in this area can claim a government backed voucher to make installation free. Click to get started.
                    @endif
                </a>
                @endif
                @if($area->isInstalling())
                     <a href="/signup?referrer=area{{$area->id}}" class="list-group-item list-group-item-action active">
                        <i class="fas fa-check"></i> We have a live network in this area which is currently being expanded. Click to find out availability at your address.
                    </a>
                @else
                     <a href="/signup?referrer=area{{$area->id}}" class="list-group-item list-group-item-action active">
                        <i class="fas fa-check"></i> We are expanding our network in this area and will be available soon. Click here to add your address to our priority list.
                    </a>
                @endif
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <x-articles :articles="$area->articles()->paginate(9)" />
    </div>

    <x-section_heading title="Ask us anything" subtitle="We're here for you." rowclass="mt-5"/>
     <x-contact />

</div>
@endsection