@extends('layouts.app')

@section('content')
    <style>
        .service-label {
            width: 25px;
            height: 25px;
            display: block;
            border-radius: 50%;
        }

        .service-label.orange {
            background: #e67e22;
        }

        .service-label.green {
            background: #27ae60;
        }

        .service-label.red {
            background: #c0392b;
        }
    </style>
    <div class="row mb-2">
        <div class="col-sm-6">

        </div>
        <div class="col-sm-6">

        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Status dos serviços</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item active">Status</li>
            </ol>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Status dos serviços</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th style="width: 50px;"></th>
                        <th>Serviço</th>
                    </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>
                                <span class="service-label red"></span>
                            </td>
                            <td>Servidor chat</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="service-label red"></span>
                            </td>
                            <td>Servidor cacheta</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="service-label red"></span>
                            </td>
                            <td>Servidor damas</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="service-label red"></span>
                            </td>
                            <td>Servidor totems</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="service-label green"></span>
                            </td>
                            <td>Servidor do cassino</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="service-label green"></span>
                            </td>
                            <td>Servidor de proxy 01</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="service-label green"></span>
                            </td>
                            <td>Servidor de proxy 02</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="service-label green"></span>
                            </td>
                            <td>Servidor de banco de dados</td>
                        </tr>
                    </tbody>

                </table>
            </div>
        </div>
    </div>
@endsection