<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Social Media</title>
  <link rel="shortcut icon" type="image/png" href="<?= base_url() ?>assets/images/logos/favicon.png" />
  <link rel="stylesheet" href="<?= base_url() ?>assets/css/styles.min.css" />
  <style>
        .native-toast {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(50, 50, 50, 0.8);
            border-radius: 3px;
            color: #fff;
            opacity: 0;
            text-align: center;
            padding: 10px 12px;
            z-index: 99999;
            transition: transform 0.25s, opacity 0.25s, top 0.25s, bottom 0.25s;
            box-sizing: border-box;
            max-width: 18rem;
        }

        .native-toast-error {
            background-color: #ff3d3d;
            color: #fff;
        }

        .native-toast-success {
            background-color: #62a465;
            color: #fff;
        }

        .native-toast-warning {
            background-color: darken(#ffce65, 15);
            color: #fff;
        }

        .native-toast-info {
            background-color: #67daff;
            color: #fff;
        }

        .native-toast-edge {
            border-radius: 0;
            /* max-width: 100%; */
            /* width: 100%; */
            text-align: left;
            /* left: 0; */
            margin: auto;
            border-radius: 15px;
        }

        .native-toast-shown {
            opacity: 1;
            bottom: 50px;
        }

        .custom-tooltip {
            position: relative;
            display: inline-block;
        }
    </style>
</head>

<body>
  <!--  Body Wrapper -->
  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
    data-sidebar-position="fixed" data-header-position="fixed">
    <div
      class="position-relative overflow-hidden radial-gradient min-vh-100 d-flex align-items-center justify-content-center">
      <div class="d-flex align-items-center justify-content-center w-100">
        <div class="row justify-content-center w-100">
          <div class="col-md-8 col-lg-6 col-xxl-3">
            <div class="card mb-0">
              <div class="card-body">
                <a href="" class="text-nowrap logo-img text-center d-block py-3 w-100">
                  <!-- <img src="../assets/images/logos/dark-logo.svg" width="180" alt=""> -->
                  <h2>Social Media</h2>
                </a>
                <p class="text-center">Your Social Campaigns</p>
                <form method="POST">
                  <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                  </div>
                  <div class="mb-4">
                    <label for="exampleInputPassword1" class="form-label">Password</label>
                    <input type="password" name="password" class="form-control" id="exampleInputPassword1">
                  </div>
                  <div class="d-flex align-items-center justify-content-between mb-4">
                    <div class="form-check">
                      <!-- <input class="form-check-input primary" type="checkbox" value="" id="flexCheckChecked" checked> -->
                      <!-- <label class="form-check-label text-dark" for="flexCheckChecked">
                        Remeber this Device
                      </label> -->
                    </div>
                    <!-- <a class="text-primary fw-bold" href="">Forgot Password ?</a> -->
                  </div>
                  <button type="submit" class="btn btn-primary w-100 py-8 fs-4 mb-4 rounded-2">Sign In</button>
                  <div class="d-flex align-items-center justify-content-center">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="notify"></div>
  <script src="<?= base_url() ?>assets/libs/jquery/dist/jquery.min.js"></script>
  <script src="<?= base_url() ?>assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="<?= base_url() ?>assets/js/notification.js"></script>
</body>

<?php
if (isset($_SESSION['success'])) { ?>

  <script>
    success('<?= $_SESSION['success'] ?>');
  </script>

<?php } else if (isset($_SESSION['error'])) { ?>

  <script>
    error('<?= $_SESSION['error'] ?>');
  </script>

<?php
} else if (isset($_SESSION['info'])) { ?>

  <script>
    info('<?= $_SESSION['info'] ?>');
  </script>

<?php

}
?>


</html>