@extends('layouts.master')
  @section('content')

  <style>
    @keyframes blink {
        0% {
            opacity: 1;
            text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
        }
        50% {
            opacity: 0.5;
            text-shadow: 0 0 5px white, 0 0 15px white, 0 0 25px white;
        }
        100% {
            opacity: 1;
            text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
        }
    }
</style>
      <div class="container-xxl flex-grow-1 container-p-y">

          <div class="card">
              <div class="card-header card-title">Camera & Region Management</div>
              <div class="row mt-5 d-flex justify-content-center continer">
                  <div class="col-md-3" style="height: 104px;">
                      <a href="{{ route('only.cameras.lists') }}"
                          class="btn btn-default btn-lg" style="height: 100%;display: grid;">
                          <i class="bi bi-list-columns-reverse text-dark ms-1 me-3" width="30" height="30"
                              viewbox="0 0 24 24" fill="#B9A8FF"></i>
                          Camera's List
                      </a>
                  </div>

                  <div class="col-md-3" style="height: 104px;">
                      <a  style="height: 100%;display: grid;" href="{{ route('all.rigions.lists') }}" class="btn btn-default btn-lg">
                          <i class="bi bi-list-columns-reverse text-dark ms-1 me-3" width="30" height="30"
                              viewBox="0 0 24 24" fill="#B9A8FF"></i>
                          Regions List
                      </a>
                  </div>
                  </dHiv>
              </div>
              <div class="row mt-5 d-flex justify-content-center continer">
                <div class="col-md-3" style="height: 104px;">
                    <a href="{{ route('streamWithCamera.add') }}"
                        class="btn btn-default btn-lg" style="height: 100%;display: grid;">
                        <i
                        class="bi bi-plus-circle-fill text-dark ms-1 me-3" width="30" height="30"
                        viewBox="0 0 24 24" fill="#B9A8FF"></i>
                        Add New Camera
                    </a>
                </div>
                <div class="col-md-3" style="height: 104px;">
                    <a href="{{ route('region.add') }}"  style="height: 100%;display: grid;" class="btn btn-default btn-lg"><i
                            class="bi bi-plus-circle-fill text-dark ms-1 me-3" width="30" height="30"
                            viewBox="0 0 24 24" fill="#B9A8FF"></i>New Region</a>
                </div>


            </div>


            <div class="row text-white" style="text-align: center; display: block; margin-top: 100px; margin-bottom: 65px; color: white; text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white; animation: blink 1.5s infinite;">
                To setup your platform kindly add a new camera
            </div>


          </div>
      </div>
      </div>
  @endSection