@extends('pwa::layouts.master')

@section('content')
    <div class="w-full mx-auto py-6 px-4 flex justify-between align-center">
        <div class="flex items-center space-x-2">
            <a href="{{ url('/pwa/dashboard')}}" id="announcement" class="no-underline flex items-center justify-center space-x-1">
                <svg class="fill-gray-600 h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m368-417 202 202-90 89-354-354 354-354 90 89-202 202h466v126H368Z"/></svg>
            </a>
            <span class="font-extrabold px-0 text-grey-800 text-xl" id="announcement-date"></span>
        </div>
    </div>
    <main class="w-full px-4 pt-2 min-h-screen mb-24 flex flex-col items-center justify-start">
        <div id="announcement-details" class="w-full flex flex-col items-center justify-start px-2 py-3 bg-white shadow-lg rounded-md">
            <div class="w-full flex align-center space-x-2 mb-6">
                <div class="h-8 w-8 bg-sky-500 flex items-center justify-center rounded-md">
                    <svg class="h-6 w-6 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M479.88-354Q414-354 368-400.08 322-446.17 322-512v-233q0-65.83 46.12-111.92 46.12-46.08 112-46.08T592-856.92q46 46.09 46 111.92v233q0 65.83-46.12 111.92-46.12 46.08-112 46.08Zm.12-275ZM425-59v-127q-121-16-199-109.12T148-512h111q0 92 64.7 156.5T480.2-291q91.8 0 156.3-64.64Q701-420.29 701-512h111q0 124-78 217T535-186v127H425Zm55-421q13.6 0 22.8-9.2 9.2-9.2 9.2-22.8v-233q0-13.6-9.2-22.8-9.2-9.2-22.8-9.2-13.6 0-22.8 9.2-9.2 9.2-9.2 22.8v233q0 13.6 9.2 22.8 9.2 9.2 22.8 9.2Z"/></svg>
                </div>
                <div class="flex-1">
                    <span class="text-gray-600 relative top-1">{{$announcement["updated_at"] ?? ''}}</span>
                </div>
            </div>
            <p class="w-full text-sm font-extrabold mb-2">
                {{$announcement["title"] ?? ''}}
            </p>
            <p class="w-full text-sm text-gray-600 mb-2">
                {{$announcement["content"] ?? ''}}
            </p>
            @if ($announcement["attachment"])
                <img src="{{ url('/'). '/storage/' .$announcement['attachment']}}" alt="{{$announcement['attachment']}}" />
            @endif
        </div>
    </main>


    <x-pwa::pwa-footer currentPage="home" />

@endsection

@section('custom-js')

@endsection