<?php
$mode = get_option('wedima_site_maintenance_mode');
?>
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Wedima">

    <!-- <link href="<?= plugin_dir_url(__FILE__) . 'assets/fonts/elegant-fonts.css' ?>" rel="stylesheet" type="text/css"> -->
    <link href="<?= plugin_dir_url(__FILE__) . 'assets/bootstrap/css/bootstrap.css' ?>" rel="stylesheet" type="text/css">
    <link href="<?= plugin_dir_url(__FILE__) . 'assets/css/style.css' ?>" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

    <title><?= ($mode == 1) ? __('Coming Soon!', 'wedima-site') : __('Under Maintenance', 'wedima-site') ?> | <?= __('An awesome Wedima Website', 'wedima-site') ?></title>

    <style>
        body {
            background-color: #f3f3f3;
        }
    </style>

</head>

<body>

    <div class="page-wrapper">
        <!-- <header>
        <div class="brand animate"><a href=""><img src="<?= plugin_dir_url(__FILE__) . 'assets/img/logo.png' ?>" alt=""></a></div>
    </header> -->
        <div class="content-wrapper">
            <div class="content-main animate">
                <div class="container">
                    <h1 class="font-size-90"><?= ($mode == 1) ? 'Coming Soon!' : 'Maintenance!' ?></h1>
                    <h2 class="opacity-90"><?= __('The website', 'wedima-site') ?> <strong><?= $_SERVER['HTTP_HOST'] ?></strong> <?= ($mode == 1) ? __('is currently being created!', 'wedima-site') : __('is currently under maintenance!', 'wedima-site') ?></h2>
                    <p class="opacity-90"><?= __('Please try again later', 'wedima-site') ?></p>
                </div>
                <!--end container-->
            </div>
            <!--end content-main-->
            <div class="background-wrapper">
                <div id="background-content"></div>
            </div>
            <!--end background-wrapper-->
        </div>
        <!--end content-wrapper-->
        <footer>
            <div class="animate">
                <p><?= do_shortcode('[wedima_site_copyright]') ?> <?= do_shortcode('[wedima_site_credits logo-height="1em" logo-width="100px"]') ?></p>
            </div>
            <!--end footer bar-->
        </footer>
    </div>
    <!--end page-wrapper-->

    <script src="<?= plugin_dir_url(__FILE__) . 'assets/js/jquery-2.2.1.min.js' ?>"></script>
    <script src="<?= plugin_dir_url(__FILE__) . 'assets/bootstrap/js/bootstrap.min.js' ?>"></script>
    <script src="<?= plugin_dir_url(__FILE__) . 'assets/js/sketch.min.js' ?>"></script>
    <script src="<?= plugin_dir_url(__FILE__) . 'assets/js/custom.js' ?>"></script>

    <script>
        var COLOURS = ['#E82E31', '#DADADA', '#FFFFFF'];
        var radius = 0;
        var nextColor = 0;

        Sketch.create({

            container: document.getElementById('background-content'),
            autoclear: false,
            retina: 'auto',

            update: function() {
                radius = 2 + abs(sin(this.millis * 0.003) * 50);
            },

            click: function() {
                if (nextColor + 1 < COLOURS.length) {
                    nextColor++;
                } else {
                    nextColor = 0;
                }
            },

            touchmove: function() {

                for (var i = this.touches.length - 1, touch; i >= 0; i--) {

                    touch = this.touches[i];

                    this.lineCap = 'round';
                    this.lineJoin = 'round';
                    this.fillStyle = this.strokeStyle = COLOURS[nextColor % COLOURS.length];
                    this.lineWidth = radius;

                    this.beginPath();
                    this.moveTo(touch.ox, touch.oy);
                    this.lineTo(touch.x, touch.y);
                    this.stroke();
                }
            }
        });
    </script>
</body>

</html>