@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;">BASELINE</h3>
@endsection

@section('content')

<style>
    * {
        font-family: 'Roboto', sans-serif;
        box-sizing: border-box;
    }

    .baseline-container {
        max-width: 980px;
        margin: 40px auto;
        padding: 0 40px;
    }

    .baseline-heading {
        font-size: 36px;
        font-weight: 700;
        color: #f5c400;
        margin-bottom: 14px;
    }

    .divider {
        border: none;
        border-top: 2px solid #111;
        margin-bottom: 24px;
    }

    .intro-text {
        font-size: 14px;
        color: #27AD52;
        margin-bottom: 30px;
    }

    .activity-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
    }

    .activity-name {
        font-size: 22px;
        font-weight: 700;
        color: #22c55e;
    }

    .activity-status {
        font-size: 22px;
        font-weight: 700;
        color: #22c55e;
        white-space: nowrap;
        margin-left: 40px;
    }
</style>

@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;">BASELINE</h3>
@endsection

@section('content')

<style>
    * {
        font-family: 'Roboto', sans-serif;
        box-sizing: border-box;
    }

    .baseline-container {
        max-width: 980px;
        margin: 40px auto;
        padding: 0 40px;
    }

    .baseline-heading {
        font-size: 36px;
        font-weight: 700;
        color: #f5c400;
        margin-bottom: 14px;
    }

    .divider {
        border: none;
        border-top: 2px solid #111;
        margin-bottom: 24px;
    }

    .intro-text {
        font-size: 14px;
        color: #27AD52;
        margin-bottom: 30px;
    }

    .activity-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
    }

    .activity-name {
        font-size: 22px;
        font-weight: 700;
        color: #22c55e;
    }

    .activity-status {
        font-size: 22px;
        font-weight: 700;
        color: #22c55e;
        white-space: nowrap;
        margin-left: 40px;
    }
</style>

<div class="baseline-container">

    <div class="baseline-heading">Baseline Activities</div>
    <hr class="divider" />
    <div class="intro-text">Baseline activities are undergoing as following:</div>

    @forelse($baselines as $baseline)
        <div class="activity-row">
            <div class="activity-name">
                {{ $loop->iteration }}- {{ $baseline->name }}
            </div>
            <div class="activity-status">
                @if(strtolower($baseline->status) == 'completed')
                    Completed
                @elseif(strtolower($baseline->status) == 'ongoing')
                    Ongoing
                @else
                    {{ $baseline->status }}
                @endif
            </div>
        </div>
    @empty
        <div class="text-center py-8 text-gray-500">
            No baseline activities found
        </div>
    @endforelse

</div>

@endsection

@endsection