@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/modules/overview.css') }}">
@endpush

@section('content')
<section class="overview-page">
    <div class="page-heading">
        <div>
            <h1>{{ $module['title'] }}</h1>
            <p>{{ $module['subtitle'] }}</p>
        </div>
        <button class="button blue" data-mock-action="acción iniciada">+ {{ $module['action'] }}</button>
    </div>
    <div class="overview-cards">
        @foreach ($module['stats'] as $stat)
            <article class="{{ $stat['tone'] }}">
                <span>{{ $stat['label'] }}</span>
                <strong>{{ $stat['value'] }}</strong>
                <small>{{ $stat['detail'] }}</small>
            </article>
        @endforeach
    </div>
    <div class="overview-flow">
        <h2>{{ $module['flow'][0] }}</h2>
        <ol>
            @foreach ($module['flow'][1] as $step)
                <li>✓ {{ $step }}</li>
            @endforeach
        </ol>
    </div>
    <div class="overview-list">
        @foreach ($module['items'] as $item)
            <button data-mock-action="{{ $item['title'] }} seleccionado">
                <i class="{{ $item['tone'] }}"></i>
                <span>
                    <strong>{{ $item['title'] }}</strong>
                    <small>{{ $item['meta'] }}</small>
                </span>
                <b>{{ $item['status'] }}</b>›
            </button>
        @endforeach
    </div>
</section>
@endsection