{% extends "pagetemplate.j2.html" %}

{% block body %}
<style>
    .app-button {
    box-shadow: 4px 5px 3px #00000069;
    margin: 3px;
}

.app-icon {
    aspect-ratio: 16/9;
    overflow: hidden;
    height: auto;
    flex-grow: 0;
    padding: 0px;
    position: relative;
    z-index: 1001;
    background: var(--box-bg);
    border-radius: var(--control-border-radius);

    &>img {
        position: absolute;
        object-fit: contain;
        width: 100%;
        height: 100%;
        margin: auto;
        top: 0%;
        left: 0%;
        z-index: 1002;

    }


    &>.label {
        width: 100%;
        background-color: var(--alt-control-bg);
        height: min-content;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        text-shadow:
            1px 1px 2px var(--contrasting-bg-color),
            -1px 1px 2px var(--contrasting-bg-color),
            -1px -1px 2px var(--contrasting-bg-color),
            1px -1px 2px var(--contrasting-bg-color);
        position: absolute;
        z-index: 1002;
        opacity: 0.85;
    }
    &>.label-bottom {
        width: 100%;
        height: min-content;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        text-shadow:
            1px 1px 2px var(--contrasting-bg-color),
            -1px 1px 2px var(--contrasting-bg-color),
            -1px -1px 2px var(--contrasting-bg-color),
            1px -1px 2px var(--contrasting-bg-color);
        position: absolute;
        z-index: 1002;
        opacity: 0.7;
    }


    &>.sheen {
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 1003;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.082) 58%, rgb(0 0 0 / 0%) 85%, rgba(0, 0, 0, 0.363) 100%) !important;
    }
}

.popup{
    position: absolute;
    z-index: 1004;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 24rem;
    min-height: 24rem;
}

</style>
<main>
    <h2>Apps</h2>
    <div class="window paper">
        <div class="flex-row gaps noselect">
            {% for app in sorted(list(apps.keys())) %}
            {{ apps[app].render() }}
            {% endfor %}
            <div class="grow"></div>
        </div>
    </div>
</main>
{% endblock %}