{# @var craft \craft\web\twig\variables\CraftVariable #}
{% extends 'image-optimize/_layouts/imageoptimize-cp.twig' %}

{% set title = 'Welcome to ImageOptimize!' %}

{% set linkGetStarted = url('settings/plugins/image-optimize') %}
{% set docsUrl = "https://github.com/nystudio107/craft-imageoptimize/blob/v1/README.md" %}

{% do view.registerAssetBundle("nystudio107\\imageoptimize\\assetbundles\\imageoptimize\\ImageOptimizeAsset") %}
{% set baseAssetsUrl = view.getAssetManager().getPublishedUrl('@nystudio107/imageoptimize/assetbundles/imageoptimize/dist', true) %}

{% set crumbs = [
    { label: "ImageOptimize", url: url('image-optimize') },
    { label: "Welcome"|t, url: url('image-optimize/welcome') },
] %}

{% block content %}
    <div id="cp-nav-content" class="readable" style="text-align:center; margin:0 auto; padding: 5% 10%;">
        <confetti>
        </confetti>
        <img src="{{ baseAssetsUrl ~ '/img/ImageOptimize-icon.svg' }}" width="30%" height="auto" />
        <h2>Thanks for using ImageOptimize!</h2>
        <p>ImageOptimize allows you to automatically create & optimize responsive image transforms from your Craft CMS assets.</p>
        <p>It works equally well with native Craft image transforms, and image services like <a href="https://imgix.com" target="_blank" rel="noopener">imgix</a>, with zero template changes.</p>

        <p>We hope you love it! For more information, please <a href="{{ docsUrl }}" target="_blank" rel="noopener">see the documentation</a>.</p>
        <p>
            &nbsp;
        </p>
        <p>
            <a href="{{ linkGetStarted }}"><button class="btn submit">Get Started</button></a>
        </p>
    </div>
    <div style="text-align:center; margin:0 auto; padding: 0;">
        <p class="instructions">
            Brought to you by <a href="http://nystudio107.com" target="_blank" rel="noopener">nystudio107</a>
        </p>
    </div>
{% endblock %}

{% block foot %}
    {# include our JavaScript modules #}
    {{ parent() }}
    {{ craft.imageOptimize.registerJsModules([
        'welcome.js',
    ]) }}
{% endblock %}