@extends(decide_template())

@section('title', $pageTitle)

@section('page_styles')
<link href="{{ asset('css/plan.css') }}?v={{$local_version}}" rel="stylesheet" type="text/css">
@endsection

@section(decide_content())

<div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid" data-name="PlanUsage">
    <div class="row">
        <div class="col-md-3">
            <div class="kt-portlet plan-rail">
                <div class="kt-portlet__body p-0">
                    <ul class="plan-tabs">
                        @foreach($tabs as $t)
                            <li class="plan-tab {{ $t['id'] === $activeId ? 'is-active' : '' }} {{ empty($t['_available']) ? 'is-locked' : '' }}">
                                <a href="{{ route('plan.tab', ['tab' => $t['id']]) }}">
                                    <i class="{{ $t['icon'] ?? 'la la-circle' }}"></i>
                                    <span>{{ $t['label'] }}</span>
                                    @if(empty($t['_available']))
                                        <i class="la la-lock plan-tab__lock" title="@lang('plan.common.not_available')"></i>
                                    @endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="kt-portlet">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            <i class="{{ $active['icon'] ?? '' }}"></i>
                            {{ $active['label'] }}
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    @if(empty($active['_available']))
                        @include('plan._locked', ['tab' => $active])
                    @elseif(!empty($active['view']) && view()->exists($active['view']))
                        @include($active['view'], ['tab' => $active] + $context)
                    @else
                        <div class="plan-empty">
                            @lang('plan.overview.empty')
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@endsection