<app-layout>
    <Head>
        <title>{{ $t('Staking') }} {{ staking.currency_symbol }}</title>
        <meta name="description" content="">
    </Head>
    <!-- components title start -->
    <div class="components-title">
        <h2>{{ $t('Staking') }} {{ staking.currency_symbol }}</h2>
    </div>
    <!-- components title end -->
    <div class="staking-inner">

        <div class="staking-inner__image">
            <img src="/images/staking.png"/>
        </div>

        <div class="staking-inner__options">
            <div class="options-item">
                <span class="options-item__title">{{ $t('Coin') }}</span>
                <span class="options-item__value">{{ staking.currency }}</span>
            </div>
            <div class="options-item">
                <span class="options-item__title">{{ $t('Symbol') }}</span>
                <span class="options-item__value">{{ staking.currency_symbol }}</span>
            </div>
            <div class="options-item">
                <span class="options-item__title">{{ $t('Minimum stake amount') }}</span>
                <span class="options-item__value">{{ staking.min_amount }} {{ staking.currency_symbol }}</span>
            </div>
            <div class="options-item">
                <span class="options-item__title">{{ $t('Maximum stake amount') }}</span>
                <span class="options-item__value">{{ staking.max_amount }} {{ staking.currency_symbol }}</span>
            </div>
            <div v-for="(reward, days) in staking.ranges" class="options-item">
                <span class="options-item__title">
                    <template v-if="days == 1">{{ $t('Est. APY') }} {{ days }} {{ $t('day') }}</template>
                    <template v-else>{{ $t('Est. APY') }} {{ days }} {{ $t('days') }}</template>
                </span>
                <span class="options-item__value"><span>{{ reward }} %</span></span>
            </div>
        </div>


        <!-- calculator start -->
        <div class="staking-inner__calculator">
            <div class="calculator-info">
                <div class="calculator-info__item"><span class="calculator-info__title">{{ $t('Balance:') }}</span>                <template v-if="$page.props.user">{{ balance }}</template><template v-else>0.00</template> {{ staking.currency_symbol }}</div>
                <div class="calculator-info__item"><span class="calculator-info__title">{{ $t('Estimated Interests:') }}</span>    {{ calculatedReward || '0.00' }} {{ staking.currency_symbol }}</div>
                <div class="calculator-info__item"><span class="calculator-info__title">{{ $t('Value Date:') }}</span>             {{ valueDate}}</div>
                <div class="calculator-info__item"><span class="calculator-info__title">{{ $t('Redemption Date:') }}</span>        {{ redemptionDate }}</div>
            </div>

            <div class="calculator-form">
                <form>
                    <div class="components-filter__row">
                        <div>
                            <label for="text-input-36" class="flex form-label">{{ $t('Stake period') }}:</label>
                            <button @click.prevent="setRange(days, reward)" v-for="(reward, days) in staking.ranges" :class="{'bg-yellow-500 bg-active': activeDays == days, 'hover:bg-yellow-500 bg-active': activeDays == days}" class="mr-2 mt-5 text-white bg-gray-500 border-0 py-2 px-6 focus:outline-none hover:bg-gray-600 rounded">
                                <span class="components-filter__icon">
                                    <template v-if="days == 1">{{ days }} {{ $t('day') }}</template>
                                    <template v-else>{{ days }} {{ $t('days') }}</template>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="components-filter__row">
                        <div class="components-filter__item">
                            <label for="text-input-36" class="form-label">{{ $t('Amount in') }} {{ staking.currency_symbol }}:</label>
                            <input @keyup="(e) => clearInput(e)" @keypress="(e) => handleInput(e)" @paste.prevent @drop.prevent placeholder="0.00" v-model="form.amount" id="text-input-36" type="text" class="border-gray-200 focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-10 rounded mt-2 block w-full">
                        </div>
                    </div>
                    <div class="components-filter__row">
                        <div class="components-filter__item">
                            <button @click.prevent="submit" class="flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">
                                <span class="components-filter__icon">
                                    <svg v-show="sending" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                    <template v-if="$page.props.user">{{ $t('Stake') }} {{ staking.currency_symbol }}</template>
                                    <template v-else>{{ $t('Login to stake' )}}</template>
                                </span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div><!-- calculator end -->


    </div>
    <!-- form search end -->
</app-layout>
