<div class="appful">
    <div class="w-full flex justify-center mt-32">
        <div class="bg-white rounded-3xl p-12 flex flex-col min-w-[32rem]">
            <img src="{{ logo_bg }}" alt="logo" class="rounded-full shadow-lg self-center -mt-16 -translate-y-1/2 w-24 h-24">
            <h1 class="text-black text-6xl -mt-8 self-center font-semibold">Appful</h1>
            {% if data.logged_in == false %}
                <div class="mb-8 text-base pt-6 max-w-[20rem] self-center text-center">Use your existing account or create a new one at <a target="_blank" href="https://appful.io"
                                                                                                                                           class="underline text-blue-600 hover:text-blue-800 visited:text-purple-600">appful.io</a>
                    and login to enjoy Appful!
                </div>
            {% else %}
                <div class="mb-14"></div>
            {% endif %}
            {% if data.logged_in == true %}
                <h4 class="text-3xl mb-2">Hey, <span class="font-bold">{{ data.username }}</span>!</h4>
                <div class="text-xl text-gray-500 mb-6">Everything is connected and working!</div>
                <form method="post" class="flex flex-col items-start gap-y-2">
                    <a href="https://dashboard.appful.io" target="_blank" class="shadow bg-appful hover:bg-appful-dark focus:shadow-outline focus:outline-none rounded flex items-center pl-8">
                        <p class="text-white font-bold text-xl cursor-pointer py-2 pr-8">Go to dashboard</p>
                    </a>
                    <div onclick="logout()" class="shadow bg-appful hover:bg-appful-dark focus:shadow-outline focus:outline-none rounded flex items-center pl-8">
                        <div id="appful_logout_loading" class="loader mr-4" style="display: none;"></div>
                        <input onclick="logout(); return false;" type="submit" value="Logout" class="text-white font-bold text-xl cursor-pointer py-2 pr-8">
                    </div>
                </form>
            {% else %}
                <form method="post" class="flex flex-col">
                    <label for="username" class="hidden text-base text-gray-300 font-medium mb-0.5">E-Mail</label>
                    <input type="email" id="username" name="username" placeholder="E-Mail"
                           class="text-xl mb-4 w-full !shadow-md !bg-gray-200 !appearance-none !border-2 !border-gray-200 !rounded-md !py-3 !px-4 !text-gray-700 !leading-tight !focus:outline-none !focus:bg-white !focus:border-appful">
                    <label for="password" class="hidden text-base text-gray-300 font-medium mb-0.5">Password</label>
                    <input type="password" id="password" name="password" placeholder="Password"
                           class="text-xl mb-6 w-full !shadow-md !bg-gray-200 !appearance-none !border-2 !border-gray-200 !rounded-md !py-3 !px-4 !text-gray-700 !leading-tight !focus:outline-none !focus:bg-white !focus:border-appful">
                    <div onclick="login();" class="self-start shadow bg-appful hover:bg-appful-dark focus:shadow-outline focus:outline-none rounded flex items-center pl-8">
                        <div id="appful_login_loading" class="loader mr-4" style="display: none;"></div>
                        <input onclick="login(); return false;" type="submit" value="Login" class="text-white font-bold text-xl cursor-pointer py-2 pr-8">
                    </div>
                </form>
            {% endif %}
            <div id="appful_error_container" class="p-4 text-red-700 bg-red-100 mt-8 rounded-lg" onclick="hide_error();" style="display: none" role="alert">
                <span class="font-medium text-sm">Error!</span>
                <div class="text-base" id="appful_error"></div>
            </div>
            {% if data.last_error != null %}
                <div id="appful_error_container_last_error" class="p-4 flex flex-col text-red-500 bg-red-100 mt-8 rounded-lg" role="alert">
                    <span class="font-medium text-sm">Error connecting to Appful!</span>
                    <div class="text-base">{{ data.last_error }}</div>
                    <small class="text-xs pt-2">Resolve the problem and try to log in again</small>
                </div>
            {% endif %}
            <hr class="mt-8 -ml-12" style="width: calc(100% + 6rem);">
            <div class="w-full mt-5">
                <h2 class="text-2xl mb-0.5 font-medium">Companions</h2>
                <h2 class="text-sm text-gray-light mb-4 max-w-[24rem]">Companions are small extensions that can extend the functionality of the Appful core plugin.</h2>
                <div class="w-full grid grid-cols-3 gap-2">
                    {% for companion in data.companions %}
                        <a href="{{ companion.link }}">
                            <div class="p-4 flex justify-center items-center border rounded-lg flex-col">
                                <p class="text-lg">{{ companion.name }}</p>
                                <p>Status: {% if companion.active %}&#x2714;{% else %}&#x2716;{% endif %}</p>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <form id="appful_submit_token_form" method="post" class="hidden">
        <input type="text" id="appful_submit_token" name="appful_token">
        <input type="text" id="appful_submit_username" name="appful_username">
    </form>

    <form id="appful_submit_logout_form" method="post" class="hidden">
        <input type="checkbox" id="appful_logout" name="appful_logout" checked>
    </form>
</div>

<script>
    const appful_api_url = "{{ data.appful_api_url }}";
</script>

{% if data.logged_in == true %}
    <script>
        const appful_session_id = "{{ data.session_id }}";
    </script>
{% endif %}