{% extends 'site_layout.html.j2' %}
{% set title="Donate" %}

{% block content %}
<h1>Donate and Support Titan Embeds</h1>
<p class="flow-text">Contributing to the Titan project has never been so easy! Donate to support our project development and hosting.</p>

<div class="row">
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
            <a id="patreonbtn" class="waves-effect waves-light btn btn-large center_content" href="https://www.patreon.com/TitanEmbeds" target="_blank">Donate monthly on our Patreon!</a>
        </div>
    </div>
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
            <h4>The Name-Your-Price Tool</h4>
            <p class="flow-text">Donate to receive <strong>Titan Tokens&trade;</strong> (to be spent on donator features below) and a <strong>supporter role</strong> on our support server.</p>
            <p class="range-field">
              <input type="range" id="token-slider" min="1" max="100" value="5" />
            </p>
            <p class="flow-text">$<span id="money-display">5</span> for <strong><span id="token-display">500</span> tokens</strong>!</p>
            <a class="waves-effect waves-light btn" id="donate-btn">Donate</a>
        </div>
    </div>
</div>
<hr>
<div class="row">
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
            <p class="flow-text"><strong>Current token amount: {{ session["tokens"] }}</strong></p>
        </div>
    </div>
</div>
<hr>
<h2>Donators' Shoppe</h2>
<p class="flow-text">Your personal pit-stop before your next conquest mission to embed all yer servers!</p>
<div class="row">
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
            <h4>Custom CSS Slots <strong>[100 tokens]</strong></h4>
            <p class="flow-text">Pick an amount of custom css slots you would like to stock up.</p>
            <div class="input-field inline">
                <input placeholder="Custom CSS Slots Amount" type="number" id="custom-css-slots-amount">
                <a class="waves-effect waves-light btn" id="buy-custom-css-slots-btn">Buy</a>
            </div>
        </div>
    </div>
    <div class="col s12">
        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
            <h4>Webhook Guest User Avatar <strong>[300 tokens]</strong></h4>
            <p class="flow-text">Tired of the bland Titan logo for your guests avatars in your servers? Enables your account to be able to set webhook icons for guests for all servers you can manage.</p>
            <p>(Note: Webhook Messages has to be enabled & Titan needs server permissions to create webhooks)</p>
            <a class="waves-effect waves-light btn" id="buy-webhook-guest-user-avatar-btn" {% if cosmetics.webhook_icon %}disabled{% endif %}>{% if cosmetics.webhook_icon %}Already Purchased{% else %}Buy{% endif %}</a>
        </div>
    </div>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{{ url_for('static', filename='js/donate.js') }}"></script>
{% endblock %}

{% block additional_head_elements %}
<style>
    input[type=range]::-webkit-slider-thumb {
        background-color: #303f9f;
    }
    input[type=range]::-moz-range-thumb {
        background-color: #303f9f;
    }
    input[type=range]::-ms-thumb {
        background-color: #303f9f;
    }
    
    /***** These are to edit the thumb and the text inside the thumb *****/
    input[type=range] + .thumb {
        background-color: #dedede;
    }
    input[type=range] + .thumb.active .value {
        font-size: 12pt;
        color: #303f9f;
    }
    input[type=range] + .thumb.active .value::before {
        content: "$";
    }
</style>
{% endblock %}