{% extends ../base.html %}

{% block title %}Crafty Controller - Dashboard{% end %}

{% block content %}

<div class="content-wrapper">

    <!-- Page Title Header Starts-->
  <div class="row page-title-header">
    <div class="col-12">
      <div class="page-header">
        <h4 class="page-title">Dashboard</h4>
      </div>
    </div>

  </div>
  <!-- Page Title Header Ends-->

  <div class="row">
    <div class="col-md-12 grid-margin">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-lg-3 col-md-6">
              <div class="d-flex">
                <div class="wrapper">
                  <h5 class="mb-1 font-weight-medium text-primary"> Host</h5>
                  <h3 class="mb-0 font-weight-semibold"> <i class="fas fa-chart-line"></i></h3>


                </div>
                <div class="wrapper my-auto ml-auto ml-lg-4">
                  <p class="mb-0 text-success">{{ data.get('hosts_data').get('cpu_usage') }} {{ _('CPU Usage') }}</p>
                  <p class="mb-0 text-danger">{{ data.get('hosts_data').get('mem_percent') }}% {{ _('Memory Usage') }}</p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 mt-md-0 mt-4">
              <div class="d-flex">
                <div class="wrapper">
                  <h5 class="mb-1 font-weight-medium text-primary">Servers</h5>
                  <h3 class="mb-0 font-weight-semibold">{{ data['server_stats']['total'] }}</h3>

                </div>
                <div class="wrapper my-auto ml-auto ml-lg-4">
                  <p class="mb-0 text-success">{{ data['server_stats']['total'] }} {{_('Online')}}</p>
                  <p class="mb-0 text-warning"> {{ data['server_stats']['running'] }} {{_('Shutdown')}}</p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 mt-md-0 mt-4">
              <div class="d-flex">
                <div class="wrapper">
                  <h5 class="mb-1 font-weight-medium text-primary">Players</h5>
                  <h3 class="mb-0 font-weight-semibold">18</h3>

                </div>
                <div class="wrapper my-auto ml-auto ml-lg-4">
                  <p class="mb-0 text-success">35 Max (24 H)</p>
                  <p class="mb-0 text-warning">10 Avg (24 H)</p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 mt-md-0 mt-4">
              <div class="d-flex">
                <div class="wrapper">

                  <h5 class="mb-1 font-weight-medium text-primary">Backups</h5>
                  <h3 class="mb-0 font-weight-semibold">7</h3>
                </div>
                <div class="wrapper my-auto ml-auto ml-lg-4">
                  <p class="mb-0 text-success">Last: 11-31-2020</p>
                  <p class="mb-0 text-success">Next: 12-05-2020</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 col-lg-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-header header-sm d-flex justify-content-between align-items-center">
          <h4 class="card-title">All Servers</h4>
        </div>
        <div class="card-body">

          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr class="rounded">
                  <th>Server</th>
                  <th>CPU</th>
                  <th>Memory</th>
                  <th>Disk</th>
                  <th>Players</th>
                  <th>Status</th>

                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <i class="fas fa-server"></i> Bedwarz </td>
                  <td>
                    <div class="progress">
                      <div class="progress-bar bg-success" role="progressbar" style="width: 24%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </td>
                  <td>
                    <div class="progress">
                      <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </td>
                  <td>
                    <div class="progress">
                      <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </td>
                  <td>
                    7
                  </td>
                  <td>
                    <i class="fas fa-thumbs-up"></i> <span class="text-success">Online</span>
                  </td>
                </tr>

                <tr>
                    <td>
                      <i class="fas fa-server"></i> Lobby </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      3
                    </td>
                    <td>
                      <i class="fas fa-thumbs-up"></i> <span class="text-success">Online</span>
                    </td>
                  </tr>

                <tr>
                    <td>
                      <i class="fas fa-server"></i> Bedwarz </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 12%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                    0
                    </td>
                    <td>
                      <i class="fas fa-thumbs-up"></i> <span class="text-success">Online</span>
                    </td>
                  </tr>

                <tr>
                    <td>
                      <i class="fas fa-server"></i> Creative </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                    5
                    </td>
                    <td>
                      <i class="fas fa-thumbs-up"></i> <span class="text-success">Online</span>
                    </td>
                  </tr>

                <tr>
                    <td>
                      <i class="fas fa-server"></i> Survival </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </td>
                    <td>
                      3
                    </td>
                    <td>
                      <i class="fas fa-thumbs-up"></i> <span class="text-success">Online</span>
                    </td>
                  </tr>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- content-wrapper ends -->



{% end %}