@extends('layouts.app', [
    'class' => 'forecasts index',
])

@section('content')
    @include('partials._page-title', [
        'title' => 'Previsões',
        'desc' => '',
    ])

    <div class="panel-body">

        @include('partials._alert')

        <div class="header-content">

            <div class="current">
                
                <x-entity-selector :entity="'stations'" :selectedId="$stationId"/>
                <div class="selected-date"></div>

            </div> 
            
            <div class="last-forecasts">
                            
                <div class="legend">
                    <h2 class="title">Previsão</h2>
                    <h2 class="subtitle">Próximos 10 dias</h2>
                </div> 

                <div class="content-forecasts"></div>

            </div>

        </div>

        <div class="abstract">

            <div class="quote small bold">
                Resumo
            </div>

            <div class="measure-cards"></div>
        </div>

        <div class="charts-content">


            <div class="quote small bold">
                Gráficos
            </div>



            <div class="charts"></div>
        
        </div>

        <div class="charts-empty hide">
            <div class='quote medium'>Informações não encontrada</div>
            <div class="icon">
                <i class="fal fa-clouds"></i>
            </div>
        </div>

    </div>
@endsection