{% extends 'landing/page/full_page.html' %}

{% load static %}

{% load help %}

{% block page_content %}

    <div class="row align-items-center py-3">
        <div class="col-12 mb-4">
            <h1 class="text-center text-app-primary">The Django Skeleton! {% help_button 'landing/help/lorem_help.html' 'Welcome to the Django Skeleton' %}</h1>
        </div>
        <div class="col-6 d-flex">
            <img height="300px" src="{% static 'core/img/logo/icon/django_skeleton_icon_body_small.png' %}" alt="">
            <div style="height:120px" class="mt-4 px-3 pt-5 bg-secondary-dark text-white rounded-circle">
                Hi, I am Skully!
            </div>
        </div>
        <div class="col-6">
            {% include 'core/badge/primary_outlined_badge.html' with badge_text='Introduction' %}
            <div class="mb-4">
                <h5 class="h5 mt-3">Welcome</h5>
                To get started you need to duplicate my template in GitHub! In my codebase you will find there are two
                main sections... Landing and Portal
            </div>
            <div>
                {% include 'core/badge/secondary_outlined_badge.html' with badge_text='Getting Started' %}
                <h5 class="h5 mt-3">Landing</h5>
                <div class="mb-2">
                    The landing app is seperated from the portal for advanced customization. Inside of static -> landing -> css
                    you will find a landing-bootstrap-extension. Here you can override the core bootstrap extension module
                    variables and add custom classes that are specific for the landing page.
                </div>
                <div>
                    Feel free to pull all the tools you need from the core template, but do not alter these templates
                    for the landing page. If you need specific landing functionality, create new elements and directories
                    inside of the landing directory.
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div>
                {% include 'core/badge/secondary_outlined_badge.html' with badge_text='Portal First' %}
                <h5 class="h5 mt-3">Portal</h5>
                <div class="mb-2">
                    Stratus is a data solutions company. Our main focus is ease of use for our users and displaying information
                    at a glance. For this reason, my core templates and functionality is <span class="text-accent">portal first</span>.
                    All tools outside landing application are built for portal functionality.
                </div>
                <div>
                    Built into Skully is a full functioning portal with Permissions, User Functionality, and History Tracking.
                    Navigate the navigation to learn more about this functionality.
                </div>
            </div>
        </div>
    </div>

{% endblock %}