@extends('layouts.main')

@section('content')

<div class="flex flex-col max-w-7xl h-screen p-28 mx-auto items-center">
    <div class="w-full p-10 items-center">
        <img class="w-60 mx-auto" src="{{ asset('images/login-logo.png') }}" />
    </div>
    
    <div class="w-full flex flex-row gap-20 items-stretch">
        <div class="flex flex-col w-full bg-white rounded-3xl border-shadow p-10 pb-2 items-center">
            <h1 class="text-2xl lg:text-3xl font-semibold">Manage City App</h1>
            <hr class="w-20 mx-auto h1-line pb-2 mb-6 lg:pb-5 lg:mb-8" />
            <div class="w-full">
                @foreach ($cities as $key => $city) 
                <div class="border-line p-2">
                    <a class="flex flex-row" href="{{ route('city.edit', $city->city_id) }}">
                        <svg class="w-20" xmlns="http://www.w3.org/2000/svg" width="34" height="47" viewBox="0 0 34 47">
                            <g id="smartphone" transform="translate(1.5 1.7)">
                                <rect id="Rectangle_87" data-name="Rectangle 87" width="31" height="44" rx="2" transform="translate(0 -0.2)" fill="none" stroke="#97c5a7" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
                                <circle id="Ellipse_34" data-name="Ellipse 34" cx="2" cy="2" r="2" transform="translate(14 35.8)" fill="#97c5a7"/>
                            </g>
                        </svg>
                        <span class="w-full text-xl p-2">{{ $city->city_name }}</span>
                    </a>
                </div>
                @endforeach
            </div>
            <div class="border-line w-full text-center p-5">
                <a class="text-lg font-semibold" href="{{ route('city.list') }}">See more +</a>
            </div>
        </div>
        <div class="flex flex-col w-full bg-white rounded-3xl border-shadow p-10 items-center">
            <h1 class="text-2xl lg:text-3xl font-semibold">Create New City App</h1>
            <hr class="w-20 mx-auto h1-line pb-2 mb-6 lg:pb-5 lg:mb-8" />
            <div class="py-20 mx-auto">
                <a href="{{ route('city.create') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="177" height="177" viewBox="0 0 24 24"  fill="#97c5a7">
                    <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>

@stop