module.giftcard_balance.html

{# TO TEMPLATE DEVS: DO NOT DO THESE VARIABLES IN THE FUTURE #}
{% set bgColor = "bg-gray-800" %}
{% set headerBgColor = "bg-gray-700" %}
{% set headerTextColor = "text-gray-400" %}
{% set inputBorderColor = "border-gray-300" %}
{% set inputTextColor = "text-gray-200" %}
{% set inputFocusBorderColor = "focus:border-indigo-500" %}
{% set inputFocusRingColor = "focus:ring-indigo-500" %}
{% set buttonBgColor = "bg-blue-600" %}
{% set buttonHoverBgColor = "hover:bg-blue-700" %}
{% set buttonTextColor = "text-white" %}
{% set errorBgColor = "bg-red-100" %}
{% set errorBorderColor = "border-red-400" %}
{% set errorTextColor = "text-red-700" %}
{% set successBgColor = "bg-green-100" %}
{% set successBorderColor = "border-green-400" %}
{% set successTextColor = "text-green-700" %}
{% set shadowStyle = "shadow" %}
{% set fontBold = "font-bold" %}
{% set roundedStyle = "rounded-xl" %}
{% set spacing = "space-x-2" %}

<div class="module">
    {% include 'svgs/stripes.html' %}

    <div class="module-header">
        <h2 class="module-title">{{ module.data.settings.header }}</h2>
    </div>

    <div class="module-body -mb-4">
        <form action='/module/giftcard_balance' method='post'>
            <input type="text" autocomplete="off" name="card_number" placeholder="Enter Code" value="{{ module.data.giftCard ? module.data.giftCard.code : '' }}" class="w-full p-2 border {{ inputTextColor }} {{ inputBorderColor }} {{ roundedStyle }} {{ inputFocusBorderColor }} {{ inputFocusRingColor }}" />
            <div class="mt-4 mb-4">
                <button class="btn btn-gift w-full py-2 px-4 {{ buttonTextColor }}">Check Gift Card</button>
            </div>
        </form>
    </div>

    {% if module.data.error %}
    <div class="p-4 error-msg">
        <p>{{ module.data.error }}</p>
    </div>
    {% endif %}

    {% if module.data.giftCard %}
    <div class="p-4 success-msg">
        <p>Your gift card balance is <b>{{ module.data.giftCard.balance|money_store_currency }}</b>.</p>
    </div>
    {% endif %}
</div>