@extends('layouts.app')
@section('content')
    <div class="content-heading">
        Projects
        <div class="ml-auto"><button class="btn btn-secondary btn-sm" type="button">Create project</button></div>
    </div>
    <div class="row">
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge badge-info">started</div>
                    </div>
                    <h4 class="m-0">Project #1</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-warning" style="width:22%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">22%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>01/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+5</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge badge-info">started</div>
                    </div>
                    <h4 class="m-0">Project #2</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-success" style="width:80%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">80%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>02/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+6</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge badge-info">started</div>
                    </div>
                    <h4 class="m-0">Project #3</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-info" style="width:50%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">50%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>03/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+7</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge badge-warning">paused</div>
                    </div>
                    <h4 class="m-0">Project #4</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-warning" style="width:22%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">22%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>04/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+8</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge bg-gray">pending</div>
                    </div>
                    <h4 class="m-0">Project #5</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <p class="m-0 text-center">This project does not register progress.</p>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>05/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+9</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge badge-success">completed</div>
                    </div>
                    <h4 class="m-0">Project #6</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-success" style="width:100%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">100%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>06/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+10</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge bg-gray-dark">canceled</div>
                    </div>
                    <h4 class="m-0">Project #7</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-warning" style="width:30%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">30%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>04/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+8</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge badge-info">started</div>
                    </div>
                    <h4 class="m-0">Project #8</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-danger" style="width:10%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">10%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>05/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+9</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card b">
                <div class="card-header">
                    <div class="float-right">
                        <div class="badge badge-success">completed</div>
                    </div>
                    <h4 class="m-0">Project #9</h4>
                    <small class="text-muted">Sed amet lectus id.</small>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="w-100" data-toggle="tooltip" data-title="Health">
                            <div class="progress progress-xs m-0">
                                <div class="progress-bar bg-success" style="width:100%"></div>
                            </div>
                        </div>
                        <div class="wd-xxs text-right">
                            <div class="text-bold text-muted">100%</div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td><strong>Start date</strong></td>
                            <td>06/01/2016</td>
                        </tr>
                        <tr>
                            <td><strong>Members</strong></td>
                            <td>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/04.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="project member" /></a>
                                <a class="inline" href="#"><strong>+10</strong></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Leader</strong></td>
                            <td>
                                <a href="" data-toggle="tooltip" data-title="Team leader"><img class="rounded-circle thumb24" src="/img/user/03.jpg" alt="project member" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Metrics</strong></td>
                            <td>
                                <div class="inline mr-2" data-sparkline="" data-values="20,80" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#23b7e5"]'></div>
                                <div class="inline mr-2" data-sparkline="" data-values="60,40" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#27c24c"]'></div>
                                <div class="inline" data-sparkline="" data-values="90,10" data-type="pie" data-height="24" data-slice-colors='["#edf1f2", "#ff902b"]'></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-footer text-center"><button class="btn btn-secondary" type="button">Manage project</button></div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/sparkline.js') }}"></script>
@endsection
