@extends('layouts.master')
@section('tailwind')
    <link rel="stylesheet" href="{{asset('/css/tailwind.min.css')}}">
@endsection
@section('alpine')
    <script src="{{asset('js/alpine.js')}}"></script>
@endsection
@section('animations')
    <link rel="stylesheet" href="{{'/css/animate.min.css'}}">
    <link rel="stylesheet" href="{{'/css/owl.transitions.css'}}">
@endsection
@section('graficos')
    <script src="{{asset('code/highcharts.js')}}"></script>
    <script src="{{asset('code/modules/series-label.js')}}"></script>
    <script src="{{asset('code/highcharts-more.js')}}"></script>
    <script src="{{asset('code/highcharts-3d.js')}}"></script>
    <script src="{{asset('code/modules/drilldown.js')}}"></script>
    <script src="{{asset('code/modules/data.js')}}"></script>
    <script src="{{asset('code/modules/exporting.js')}}"></script>
    <script src="{{asset('code/modules/export-data.js')}}"></script>
@endsection
@section('content')
@include('partials.containers-header')

<div class="row">
    <div class="col">
        <div class="mr-2 max-w-sm rounded overflow-hidden shadow-lg">
            {{-- <i class="nav-icon fa fa-adjust mt-2 ml-2"></i> --}}
            <div class="px-6 py-2">
                <div class="font-bold text-xl mb-2 text-red-700">@lang('Overdue Tasks')</div>
                <p class="text-gray-700 text-base">
                Tienes $pend_task tareas pendientes...
                </p>
            </div>
            <div class="px-6 py-2">
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="mr-2 max-w-sm rounded overflow-hidden shadow-lg">
            {{-- <i class="nav-icon fa fa-adjust mt-2 ml-2"></i> --}}
            <div class="px-6 py-2">
                <div class="font-bold text-xl mb-2 text-green-700">@lang('Tasks for this Week')</div>
                <p class="text-gray-700 text-base">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
                </p>
            </div>
            <div class="px-6 py-2">
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
            </div>
        </div>

    </div>
    <div class="col">
        <div class="mr-2 max-w-sm rounded overflow-hidden shadow-lg">
            {{-- <i class="nav-icon fa fa-adjust mt-2 ml-2"></i> --}}
            <div class="px-6 py-2">
                <div class="font-bold text-xl mb-2 text-blue-700">@lang('Next two Weeks')</div>
                <p class="text-gray-700 text-base">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
                </p>
            </div>
            <div class="px-6 py-2">
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
            </div>
        </div>

    </div>
</div>

@include('partials.containers-footer')
@endsection

@section('javascript')
<script>

</script>
@endsection