{% load static %}
<!doctype html>
<html lang="en">

    <head>
        
        <meta charset="utf-8" />
        <title>Maintenance | Skote - Admin & Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesbrand" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="{% static 'images/favicon.ico'%}">

        <!-- Bootstrap Css -->
        <link href="{% static 'css/bootstrap.min.css'%}" id="bootstrap-style" rel="stylesheet" type="text/css" />
        <!-- Icons Css -->
        <link href="{% static 'css/icons.min.css'%}" rel="stylesheet" type="text/css" />
        <!-- App Css-->
        <link href="{% static 'css/app.min.css'%}" id="app-style" rel="stylesheet" type="text/css" />

    </head>

    <body>
        <div class="home-btn d-none d-sm-block">
            <a href="{% url 'dashboard' %}" class="text-dark"><i class="fas fa-home h2"></i></a>
        </div>

        <section class="my-5 pt-sm-5">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <div class="home-wrapper">
                            <div class="mb-5">
                                <a href="{% url 'dashboard' %}" class="d-block auth-logo">
                                    <img src="{% static 'images/logo-dark.png'%}" alt="" height="20" class="auth-logo-dark mx-auto">
                                    <img src="{% static 'images/logo-light.png'%}" alt="" height="20" class="auth-logo-light mx-auto">
                                </a>
                            </div>
                            

                            <div class="row justify-content-center">
                                <div class="col-sm-4">
                                    <div class="maintenance-img">
                                        <img src="{% static 'images/maintenance.svg'%}" alt="" class="img-fluid mx-auto d-block">
                                    </div>
                                </div>
                            </div>
                            <h3 class="mt-5">Site is Under Maintenance</h3>
                            <p>Please check back in sometime.</p>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card mt-4 maintenance-box">
                                        <div class="card-body">
                                            <i class="bx bx-broadcast mb-4 h1 text-primary"></i>
                                            <h5 class="font-size-15 text-uppercase">Why is the Site Down?</h5>
                                            <p class="text-muted mb-0">There are many variations of passages of
                                                Lorem Ipsum available, but the majority have suffered alteration.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card mt-4 maintenance-box">
                                        <div class="card-body">
                                            <i class="bx bx-time-five mb-4 h1 text-primary"></i>
                                            <h5 class="font-size-15 text-uppercase">
                                                What is the Downtime?</h5>
                                            <p class="text-muted mb-0">Contrary to popular belief, Lorem Ipsum is not
                                                simply random text. It has roots in a piece of classical.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card mt-4 maintenance-box">
                                        <div class="card-body">
                                            <i class="bx bx-envelope mb-4 h1 text-primary"></i>
                                            <h5 class="font-size-15 text-uppercase">
                                                Do you need Support?</h5>
                                            <p class="text-muted mb-0">If you are going to use a passage of Lorem
                                                Ipsum, you need to be sure there isn't anything embar.. <a
                                                        href="mailto:no-reply@domain.com"
                                                        class="text-decoration-underline">no-reply@domain.com</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end row -->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        
        <!-- JAVASCRIPT -->
        <script src="{% static 'libs/jquery/dist/jquery.min.js'%}"></script>
        <script src="{% static 'libs/bootstrap/dist/js/bootstrap.bundle.min.js'%}"></script>
        <script src="{% static 'libs/metismenu/dist/metisMenu.min.js'%}"></script>
        <script src="{% static 'libs/simplebar/dist/simplebar.min.js'%}"></script>
        <script src="{% static 'libs/node-waves/dist/waves.min.js'%}"></script>

        <script src="{% static 'js/app.js'%}"></script>

    </body>
</html>
