
{% extends "layouts/default" %}

{% block head %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #fafafa;
        }

        img {
            margin-bottom: 27px;
            max-width: 100%;
            height: auto;
        }

        a {
            color: inherit;
        }

        a:hover {
            opacity: 0.8;
        }

        .wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
        }

        .inner_wrapper {
            padding-right: 12px;
            padding-left: 12px;
            text-align: center;
        }

        p {
            font-size: 1rem;
        }

        .repo-details-container,
        .socials-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 27px;
        }

        .repo-details__li {
            font-weight: bold;
            margin-right: 10px;
            text-transform: capitalize;
        }

        .socials {
            padding-left: 10px;
        }

        .socials__li {
            padding-right: 8px;
        }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        #instructions {
            margin-top: 10px;
            font-size: 1.4rem;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="wrapper">
        <div class="inner_wrapper">
            <img src="{{ public('img/snaju_logo_icon.png') }}" alt="Snaju Development Logo"/>
            <h1>Thanks for using the<br/> Snaju Inception Framework</h1>
            <p id="instructions">Edit `pages/views/index.twig` and save to reload.</p>

            <div class="repo-details-container">
                <ul class="repo-details">
                    <li class="repo-details__li"><a href="https://docs.dev.snaju.com/inception-framework" target="_blank">View the docs</a></li>
                    <li class="repo-details__li"><a href="https://git.hou.snaju.com/snaju-oss/inception-framework" target="_blank">Visit Repo</a></li>
                    <li class="repo-details__li"><a href="https://git.hou.snaju.com/snaju-oss/inception-framework/-/issues" target="_blank">Report a Bug</a></li>
                </ul>
            </div>

            <div class="socials-container">
                <p>Connect with us:</p>
                <ul class="socials">
                    <li class="socials__li"><a href="{{ config('socials.in') }}" target="_blank">LinkedIn</a></li>
                    <li class="socials__li"><a href="{{ config('socials.tw') }}" target="_blank">Twitter</a></li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}