<div class="absolute inset-0 flex min-w-0 flex-col overflow-hidden">
    <mat-drawer-container class="h-full flex-auto">
        <!-- Drawer -->
        <mat-drawer
            class="w-80"
            [autoFocus]="false"
            [mode]="drawerMode"
            [opened]="drawerOpened"
            #matDrawer
        >
            <div class="flex h-full flex-auto flex-col dark:bg-default">
                <!-- Watchlist -->
                <div class="flex flex-0 flex-col">
                    @for (item of data.watchlist; track item) {
                        <div class="flex flex-0 items-center border-b p-5">
                            <div class="flex flex-auto flex-col pr-6">
                                <div class="flex items-baseline">
                                    <div
                                        class="text-secondary mr-1 text-md font-medium"
                                    >
                                        {{ item.title }}
                                    </div>
                                    <div
                                        class="text-hint text-sm font-medium uppercase tracking-wider"
                                    >
                                        ({{ item.iso }})
                                    </div>
                                </div>
                                <div class="mt-2 flex items-end">
                                    <div
                                        class="min-w-20 font-mono text-2xl leading-none tracking-tighter"
                                    >
                                        {{
                                            item.amount
                                                | currency
                                                    : 'USD'
                                                    : 'symbol'
                                                    : '1.2-4'
                                        }}
                                    </div>
                                    <mat-icon
                                        class="mx-0.5 mb-px text-green-500 icon-size-3.5"
                                        [ngClass]="{
                                            'text-green-500':
                                                item.trend.dir === 'up',
                                            'text-red-500':
                                                item.trend.dir === 'down',
                                        }"
                                        [svgIcon]="
                                            item.trend.dir === 'up'
                                                ? 'heroicons_mini:arrow-long-up'
                                                : 'heroicons_mini:arrow-long-down'
                                        "
                                    ></mat-icon>
                                    <div
                                        class="mb-px font-mono text-sm font-medium leading-none"
                                        [ngClass]="{
                                            'text-green-500':
                                                item.trend.dir === 'up',
                                            'text-red-500':
                                                item.trend.dir === 'down',
                                        }"
                                    >
                                        {{ item.trend.amount }}%
                                    </div>
                                </div>
                            </div>
                            <apx-chart
                                class="flex h-10 flex-auto items-center overflow-hidden"
                                [chart]="watchlistChartOptions.chart"
                                [colors]="
                                    item.trend.dir === 'up'
                                        ? ['#48BB78']
                                        : ['#F56565']
                                "
                                [series]="item.series"
                                [stroke]="watchlistChartOptions.stroke"
                                [tooltip]="watchlistChartOptions.tooltip"
                                [xaxis]="watchlistChartOptions.xaxis"
                            ></apx-chart>
                        </div>
                    }
                </div>

                <!-- Buy / Sell -->
                <div
                    class="flex flex-auto shrink-0 flex-col bg-gray-50 pt-6 dark:bg-transparent"
                >
                    <!-- Action -->
                    <div class="flex flex-col px-6 pb-2">
                        <mat-form-field>
                            <mat-label>Action</mat-label>
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="
                                    buySellSelect.value === 'buy'
                                        ? 'heroicons_solid:arrow-down-tray'
                                        : 'heroicons_solid:arrow-up-tray'
                                "
                                matPrefix
                            ></mat-icon>
                            <mat-select
                                [value]="'buy'"
                                #buySellSelect="matSelect"
                            >
                                <mat-option [value]="'buy'">Buy</mat-option>
                                <mat-option [value]="'sell'">Sell</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>

                    <!-- Wallet -->
                    <div class="flex flex-col px-6 pb-2">
                        <mat-form-field class="w-full">
                            <mat-label>Wallet</mat-label>
                            <mat-select
                                [value]="'btc'"
                                #walletSelector="matSelect"
                            >
                                <mat-select-trigger>
                                    <span class="flex items-center">
                                        <span>{{
                                            walletSelector.triggerValue
                                        }}</span>
                                        <span class="text-hint mx-1">-</span>
                                        <span
                                            class="flex items-center font-mono"
                                        >
                                            <span>{{
                                                data.wallets[
                                                    walletSelector.value
                                                ]
                                            }}</span>
                                            <span class="ml-1">{{
                                                walletSelector.value | uppercase
                                            }}</span>
                                        </span>
                                    </span>
                                </mat-select-trigger>
                                <mat-option [value]="'btc'">Bitcoin</mat-option>
                                <mat-option [value]="'eth'"
                                    >Ethereum</mat-option
                                >
                                <mat-option [value]="'bch'"
                                    >Bitcoin Cash</mat-option
                                >
                                <mat-option [value]="'xrp'">XRP</mat-option>
                            </mat-select>
                            <mat-hint class="flex items-center">
                                <span class="mr-1">USD:</span>
                                <span class="text-normal font-mono font-medium">
                                    {{
                                        data.wallets[walletSelector.value] *
                                            data.prices[walletSelector.value]
                                            | currency: 'USD'
                                    }}
                                </span>
                            </mat-hint>
                        </mat-form-field>
                    </div>

                    <!-- Buy form -->
                    @if (buySellSelect.value === 'buy') {
                        <form class="flex flex-col px-6">
                            <mat-form-field class="w-full">
                                <mat-label>Amount</mat-label>
                                <input matInput autocomplete="off" #buyAmount />
                                <mat-select
                                    [value]="'coin'"
                                    matSuffix
                                    #buyType="matSelect"
                                >
                                    <mat-option [value]="'coin'">{{
                                        walletSelector.value | uppercase
                                    }}</mat-option>
                                    <mat-option [value]="'usd'">USD</mat-option>
                                </mat-select>
                                @if (buyType.value === 'usd') {
                                    <span matPrefix> $ </span>
                                }
                                <mat-hint class="flex items-center">
                                    @if (buyType.value === 'coin') {
                                        <span class="mr-1">It will cost:</span>
                                        <span
                                            class="text-normal font-mono font-medium"
                                        >
                                            {{
                                                buyAmount.value *
                                                    data.prices[
                                                        walletSelector.value
                                                    ]
                                                    | currency
                                                        : 'USD'
                                                        : 'symbol'
                                                        : '1.2-4'
                                            }}
                                        </span>
                                    }
                                    @if (buyType.value === 'usd') {
                                        <span class="mr-1"
                                            >You will receive:</span
                                        >
                                        <span
                                            class="text-normal font-mono font-medium"
                                        >
                                            {{
                                                buyAmount.value /
                                                    data.prices[
                                                        walletSelector.value
                                                    ] | number: '1.2-6'
                                            }}
                                            {{
                                                walletSelector.value | uppercase
                                            }}
                                        </span>
                                    }
                                </mat-hint>
                            </mat-form-field>
                            <button
                                class="mb-8 mt-4"
                                mat-flat-button
                                [color]="'primary'"
                            >
                                BUY
                            </button>
                        </form>
                    }

                    <!-- Sell form -->
                    @if (buySellSelect.value === 'sell') {
                        <form class="flex flex-col px-6">
                            <mat-form-field class="w-full">
                                <mat-label>Amount</mat-label>
                                <input
                                    matInput
                                    autocomplete="off"
                                    #sellAmount
                                />
                                <mat-select
                                    [value]="'coin'"
                                    matSuffix
                                    #sellType="matSelect"
                                >
                                    <mat-option [value]="'coin'">{{
                                        walletSelector.value | uppercase
                                    }}</mat-option>
                                    <mat-option [value]="'usd'">USD</mat-option>
                                </mat-select>
                                @if (sellType.value === 'usd') {
                                    <span matPrefix> $ </span>
                                }
                                <mat-hint class="flex items-center">
                                    @if (sellType.value === 'coin') {
                                        <span class="mr-1"
                                            >You will receive:</span
                                        >
                                        <span
                                            class="text-normal font-mono font-medium"
                                        >
                                            {{
                                                sellAmount.value *
                                                    data.prices[
                                                        walletSelector.value
                                                    ]
                                                    | currency
                                                        : 'USD'
                                                        : 'symbol'
                                                        : '1.2-4'
                                            }}
                                        </span>
                                    }
                                    @if (sellType.value === 'usd') {
                                        <span class="mr-1">You will sell:</span>
                                        <span
                                            class="text-normal font-mono font-medium"
                                        >
                                            {{
                                                sellAmount.value /
                                                    data.prices[
                                                        walletSelector.value
                                                    ] | number: '1.2-6'
                                            }}
                                            {{
                                                walletSelector.value | uppercase
                                            }}
                                        </span>
                                    }
                                </mat-hint>
                            </mat-form-field>
                            <button
                                class="mb-8 mt-4"
                                mat-flat-button
                                [color]="'primary'"
                            >
                                SELL
                            </button>
                        </form>
                    }
                </div>
            </div>
        </mat-drawer>

        <!-- Content -->
        <mat-drawer-content class="flex flex-col">
            <!-- BTC Price -->
            <div
                class="bg-card flex min-h-full flex-auto flex-col dark:bg-default"
            >
                <div
                    class="flex flex-wrap items-center border-b py-3 pl-4 pr-6 md:pl-6"
                >
                    <button
                        class="mr-6 lg:hidden"
                        mat-icon-button
                        (click)="matDrawer.toggle()"
                    >
                        <mat-icon
                            [svgIcon]="'heroicons_outline:bars-3'"
                        ></mat-icon>
                    </button>
                    <div class="my-3 mr-6 flex flex-auto flex-col">
                        <div class="flex items-center">
                            <div
                                class="text-secondary mr-2 text-2xl font-medium"
                            >
                                Bitcoin
                            </div>
                            <div
                                class="text-hint text-lg font-medium tracking-wider"
                            >
                                (BTC)
                            </div>
                        </div>
                        <div class="mt-1 flex items-end">
                            <div
                                class="mr-2 font-mono text-3xl leading-none tracking-tight"
                            >
                                {{
                                    data.btc.amount
                                        | currency: 'USD' : 'symbol' : '1.2-2'
                                }}
                            </div>
                            <mat-icon
                                class="mb-px mr-0.5 text-green-500 icon-size-5"
                                [ngClass]="{
                                    'text-green-500':
                                        data.btc.trend.dir === 'up',
                                    'text-red-500':
                                        data.btc.trend.dir === 'down',
                                }"
                                [svgIcon]="
                                    data.btc.trend.dir === 'up'
                                        ? 'heroicons_mini:arrow-long-up'
                                        : 'heroicons_mini:arrow-long-down'
                                "
                            ></mat-icon>
                            <div
                                class="mb-px font-mono text-lg font-medium leading-none"
                                [ngClass]="{
                                    'text-green-500':
                                        data.btc.trend.dir === 'up',
                                    'text-red-500':
                                        data.btc.trend.dir === 'down',
                                }"
                            >
                                {{ data.btc.trend.amount }}%
                            </div>
                        </div>
                    </div>
                    <div class="my-3 hidden items-center sm:flex">
                        <div
                            class="rounded-l-xl border border-r-0 p-4 leading-none"
                        >
                            <div class="text-secondary text-sm font-medium">
                                Market Cap
                            </div>
                            <div class="mt-2 font-mono text-xl">
                                {{
                                    data.btc.marketCap / 1000000000
                                        | number: '1.0-2'
                                        | currency
                                }}B
                            </div>
                        </div>
                        <div class="border border-r-0 p-4 leading-none">
                            <div class="text-secondary text-sm font-medium">
                                Volume
                            </div>
                            <div class="mt-2 font-mono text-xl">
                                {{
                                    data.btc.volume / 1000000000
                                        | number: '1.0-2'
                                        | currency
                                }}B
                            </div>
                        </div>
                        <div class="border border-r-0 p-4 leading-none">
                            <div class="text-secondary text-sm font-medium">
                                Supply
                            </div>
                            <div class="mt-2 font-mono text-xl">
                                {{
                                    data.btc.supply / 1000000 | number: '1.0-2'
                                }}M
                            </div>
                        </div>
                        <div class="rounded-r-xl border p-4 leading-none">
                            <div class="text-secondary text-sm font-medium">
                                All Time High
                            </div>
                            <div class="mt-2 font-mono text-xl">
                                {{ data.btc.allTimeHigh | currency: 'USD' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="relative flex flex-auto bg-gray-50 dark:bg-transparent"
                >
                    <apx-chart
                        class="relative h-160 w-full overflow-hidden md:absolute md:inset-0 md:h-auto"
                        [chart]="btcOptions.chart"
                        [colors]="btcOptions.colors"
                        [dataLabels]="btcOptions.dataLabels"
                        [grid]="btcOptions.grid"
                        [legend]="btcOptions.legend"
                        [series]="btcOptions.series"
                        [stroke]="btcOptions.stroke"
                        [tooltip]="btcOptions.tooltip"
                        [xaxis]="btcOptions.xaxis"
                        [yaxis]="btcOptions.yaxis"
                        #btcChartComponent
                    ></apx-chart>
                </div>
            </div>
        </mat-drawer-content>
    </mat-drawer-container>
</div>
