@using Abp.Configuration
@using ContractService.Authorization
@using ContractService.Configuration
@model string
@{
    ViewBag.Title = L("HomePage");
    ViewBag.CurrentPageName = PermissionNames.Pages;
    var systemName = Model ?? SettingManager.GetSettingValue(IwbSettingNames.AdminSystemName);
}

<style>
    .home-page {
        width: 100%;
        height: calc(100vh - 100px);
        position: relative;
        text-align: center;
        background: linear-gradient(60deg, rgba(84,58,183,1) 0, rgba(0,172,193,1) 100%);
        color: white;
    }

        .home-page h1 {
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            letter-spacing: 2px;
            font-size: 48px;
        }


    .home-page .inner-header {
        height: 65%;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .home-page .waves-box {
        width: 100%;
        height: 15%;
        min-height: 100px;
        max-height: 150px;
    }
    .home-page .waves-box .waves{
        width: 100%;
        height: 100%;
    }

    /* Animation */

    .home-page .parallax > use {
        animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
    }

        .home-page .parallax > use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
        }

        .home-page .parallax > use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
        }

        .home-page .parallax > use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
        }

        .home-page .parallax > use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
        }
    .home-page .footer {
        position: relative;
        height: 22%;
        text-align: center;
        background-color: white;
        margin-top: -15px;
    }
    @@keyframes move-forever {
        0% {
            transform: translate3d(-90px,0,0);
        }

        100% {
            transform: translate3d(85px,0,0);
        }
    }
    /*Shrinking for mobile*/
    @@media (max-width: 768px) {
        .home-page .waves {
            height: 40px;
            min-height: 40px;
        }


        .home-page h1 {
            font-size: 24px;
        }
    }
</style>

<div class="home-page">
    <div class="inner-header">
        <h1>@systemName</h1>
    </div>
    <!--Waves Container-->
    <div class="waves-box">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.9)" />
            </g>
        </svg>
    </div>
    <!--Waves end-->
    <div class="footer"></div>
</div>