<app-layout>

<!-- components title start -->
    <div class="components-title">
        <h2>{{ $t('Transactions') }}</h2>
    </div>
    <!-- components title end -->

    <reports-tab section="fiat_withdrawals"></reports-tab>

      <div class="components-filter">
        <div class="components-filter__row">

            <div class="components-filter__item">
                <label>{{ $t('Currency:') }}</label>
                <t-rich-user-select
                    :options="currencies.data"
                    v-model="form.currency"
                    :placeholder="$t('Select currency')"
                    value-attribute="id"
                    text-attribute="name"
                    :clearable="true"
                >
                    <template
                        slot="label"
                        slot-scope="{ className, option, query }"
                    >
                        <div class="flex">
                            <div class="flex flex-col">
                                <span>{{ option.text }}</span>
                            </div>
                        </div>
                    </template>
                </t-rich-user-select>
            </div>

            <div class="components-filter__item">
                <label>{{ $t('Status:') }}</label>
                <t-rich-user-select
                    :options="[{'id': '', 'name': 'All'},{'id': 'completed', 'name': 'Completed'}, {'id': 'pending', 'name': 'Pending'}, {'id': 'rejected', 'name': 'Rejected'}]"
                    v-model="form.status"
                    :placeholder="$t('Select status')"
                    value-attribute="id"
                    text-attribute="name"
                    :clearable="true"
                >
                    <template
                        slot="label"
                        slot-scope="{ className, option, query }"
                    >
                        <div class="flex">
                            <div class="flex flex-col">
                                <span>{{ option.text }}</span>
                            </div>
                        </div>
                    </template>
                </t-rich-user-select>
            </div>

            <div class="components-filter__item">
                <t-button-green @click.stop="getList" class="components-filter__button mt-8 py-2 px-6" :class="{ 'opacity-75': sending }">
                    <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>
                        {{ $t('Search') }}
                    </span>
                </t-button-green>
            </div>
        </div>


    </div>

    <!-- table components start -->
    <div class="table-components">

        <!-- tables start -->
        <table class="tables mob-table-fiat-withdrawals">
            <!-- thead start -->
            <thead class="table-sort no-cursor">
            <tr>

                <th>
                    <div class="table-sort__value">
                        <span class="table-sort__title">{{ $t('ID') }}</span>
                    </div>
                </th>
                <th>
                    <div class="table-sort__value">
                        <span class="table-sort__title">{{ $t('Status') }}</span>
                    </div>
                </th>
                <th>
                    <div class="table-sort__value">
                        <span class="table-sort__title">{{ $t('Amount') }}</span>
                    </div>
                </th>
                <th>
                    <div class="table-sort__value">
                        <span class="table-sort__title">{{ $t('Fee') }}</span>
                    </div>
                </th>
                <th>
                    <div class="table-sort__value">
                        <span class="table-sort__title">{{ $t('Date') }}</span>
                    </div>
                </th>
            </tr>
            </thead>
            <!-- thead end -->


            <!-- tbody start -->
            <tbody class="table-list">
            <tr v-for="withdrawal in withdrawals.data" :key="withdrawal.id">
                <td>
                    <div class="table-list__subtitle">{{ $t('ID') }}</div>
                    <div class="table-list__value">
                        <div class="table-list__text">
                            {{ withdrawal.withdrawal_id }}
                        </div>
                    </div>
                </td>
                <td>
                    <div class="table-list__subtitle">{{ $t('Status') }}</div>
                    <div class="table-list__value">
                        <div class="components-label" :class="{'label-green': withdrawal.status == 'confirmed', 'label-red': withdrawal.status == 'rejected', 'label-orange': withdrawal.status == 'pending' }">
                            <template v-if="withdrawal.status == 'confirmed'">
                                {{ 'Confirmed' }}
                            </template>
                            <template v-else-if="withdrawal.status == 'rejected'">
                                <span :title="withdrawal.rejected_reason">{{ $t('Rejected') }}</span>
                            </template>
                            <template v-else>
                                {{ $t('Pending') }}
                            </template>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="table-list__subtitle">{{ $t('Amount') }}</div>
                    <div class="table-list__value">
                        <div class="table-list__text">
                            {{ amountWithFee(withdrawal) }} {{ withdrawal.symbol }}
                        </div>
                    </div>
                </td>
                <td>
                    <div class="table-list__subtitle">{{ $t('Fee') }}</div>
                    <div class="table-list__value">
                        <div class="table-list__text">
                            {{ withdrawal.fee }} {{ withdrawal.symbol }}
                        </div>
                    </div>
                </td>
                <td>
                    <div class="table-list__subtitle">{{ $t('Date') }}</div>
                    <div class="table-list__value">
                        <div class="table-list__text">{{ withdrawal.created_at }}</div>
                    </div>
                </td>
            </tr>
            </tbody>
            <!-- tbody end -->

            <!-- tfood start -->
            <tfoot class="table-result">
            <tr>
                <td colspan="100">
                    <div v-if="withdrawals.data.length === 0" class="table-result__notfound">
                            <span class="table-result__notfound-icon">
                                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="table-result__notfound-color" d="M21 13V11C21 7.73081 21 6.09621 20.3272 4.86413C19.8219 3.93873 19.0613 3.17807 18.1359 2.67277C16.9038 2 15.2692 2 12 2V2C8.73081 2 7.09621 2 5.86413 2.67277C4.93873 3.17807 4.17807 3.93873 3.67277 4.86413C3 6.09621 3 7.73081 3 11V12.5C3 16.2433 3 18.1149 3.87311 19.4735C4.29935 20.1368 4.86322 20.7006 5.52648 21.1269C6.88505 22 8.7567 22 12.5 22V22H13" stroke="#222628"/>
                                    <line class="table-result__notfound-color" x1="15.5" y1="13.5" x2="7.5" y2="13.5"/>
                                    <line class="table-result__notfound-color" x1="15.5" y1="10.5" x2="7.5" y2="10.5"/>
                                    <line class="table-result__notfound-color" x1="11.5" y1="7.5" x2="7.5" y2="7.5"/>
                                    <rect class="table-result__notfound-color color-yellow" x="14.8335" y="14.8335" width="7.08333" height="7.08333" rx="3.54167"/>
                                    <line class="table-result__notfound-color color-yellow" x1="21.1803" y1="21.3066" x2="22.5565" y2="22.6829"/>
                                </svg>
                            </span>
                        <span class="table-result__notfound-text">{{ $t('No withdrawals found.') }}</span>
                    </div>
                    <pagination :links="withdrawals.meta.links" />
                </td>
            </tr>
            </tfoot>
            <!-- tfood end -->

        </table>
        <!-- tables end -->

        <!-- table components end -->
    </div>

</app-layout>
