@extends('layouts.layout')

@section('content')
<div class="deposit">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-9 p-0">
                <div class="deposit-inventory-container">
                    <div class="deposit-controls-bar">
                        <div style="display: flex; margin: auto auto auto 0px;">
                            <div class="search">
                                <i class="fas fa-search"></i>
                                <input type="text" placeholder="Search for items" id="searchItems">
                            </div>
                            <i class="fas fa-sync-alt refresh_deposit_inv" style="margin-top: 15px; margin-left: 15px; cursor: pointer; height: 15px; width: 15px; font-size: 15px;"></i>
                        </div>
                        <div class="filters">
                            <label for="filter">Filter by</label>
                            <select id="filter">
                                <option value="all" style="background: rgb(53, 53, 65);">All Prices</option>
                                <option value="range1" style="background: rgb(53, 53, 65);">0.50 - 9.99</option>
                                <option value="range2" style="background: rgb(53, 53, 65);">10.00 - 24.99</option>
                                <option value="range3" style="background: rgb(53, 53, 65);">25.00 - 49.99</option>
                                <option value="range4" style="background: rgb(53, 53, 65);">50.00 - 249.99</option>
                                <option value="range5" style="background: rgb(53, 53, 65);">250.00 - 499.99</option>
                                <option value="range6" style="background: rgb(53, 53, 65);">500.00+</option>
                            </select>
                            <select id="order">
                                <option value="highlow" style="background: rgb(53, 53, 65);">High To Low</option>
                                <option value="lowhigh" style="background: rgb(53, 53, 65);">Low To High</option>
                            </select>
                        </div>
                    </div>
                    <div class="deposit-inventory">
                        <div class="loader"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div>
                    </div>
                </div>      
            </div>
            <div class="col-md-3 p-0">
                <div class="deposit-sidebar">
                    <div class="deposit-feedback">
                        <button class="btn btn-success">Deposit</button>
                        <div class="info">
                            <div class="item-count"><i class="fas fa-box-open"></i> <span v-html="user.items.length">0</span> / 25</div>
                            <div class="item-total" v-html="website.parseBalance(user.prices)">0</div>
                        </div>
                        <div class="selected-items"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection