<div class="piwik-donate-call">
    <div class="piwik-donate-message">
        {% if msg is defined %}
            {{ msg }}
        {% else %}
            <p>{{ 'CoreHome_DonateCall1'|translate }}</p>
            <p><strong>{{ 'CoreHome_DonateCall2'|translate }}</strong></p>
            <p>{{ 'CoreHome_DonateCall3'|translate('<strong>','</strong>', '<a target="_blank" rel="nofollow" href="https://matomo.org/recommends/premium-plugins/"><strong>', '</strong></a>')|raw }}</p>
        {% endif %}
    </div>

    <span id="piwik-worth">{{ 'CoreHome_HowMuchIsPiwikWorth'|translate }}</span>

    <div class="donate-form-instructions">({{ 'CoreHome_DonateFormInstructions'|translate }})</div>

    <form action="index.php?module=CoreHome&action=redirectToPaypal&idSite=1" method="post" target="_blank">
        <div class="piwik-donate-slider">
            <div class="slider-range">
                <div class="slider-position"></div>
            </div>
            <div style="display:inline-block;float:right;">
                <div class="slider-donate-amount">$30/{{ 'Intl_Year_Short'|translate }}</div>

                <img class="slider-smiley-face" width="40" height="40" src="plugins/Morpheus/images/smileyprog_1.png"/>
            </div>

            <input type="hidden" name="os0" value="Option 1"/>
        </div>

        <div class="donate-submit">
            <input type="image" src="plugins/Morpheus/images/paypal_subscribe.png" border="0" name="submit"
                title="{{ 'CoreHome_SubscribeAndBecomePiwikSupporter'|translate }}"/>
			<a class="donate-spacer">{{ 'CoreHome_MakeOneTimeDonation'|translate }}</a>
            <a href="index.php?module=CoreHome&action=redirectToPaypal&idSite=1&onetime=true"
               rel="noreferrer noopener" target="_blank" class="donate-one-time">{{ 'CoreHome_MakeOneTimeDonation'|translate }}</a>
        </div>

        <!-- to cache images -->
        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_0.png"/>
        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_1.png"/>
        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_2.png"/>
        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_3.png"/>
        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_4.png"/>
    </form>
    {% if footerMessage is defined %}
        <div class="form-description">
            {{ footerMessage }}
        </div>
    {% endif %}
</div>
<script type="text/javascript">
$(document).ready(function () {
    // Note: this will cause problems if more than one donate form is on the page
    $('.piwik-donate-slider').each(function () {
        $(this).trigger('piwik:changePosition', {position: 1});
    });
});
</script>
