@php
    use Illuminate\Support\Facades\Auth;
    $tema = Auth::user()->getTema();
    $posicaoAbas = Auth::user()->getPosicaoAbas();
@endphp
<section class="container-config-usuario janela content-janela janela-form">
    <div class="sizing">
        <div class="content-titulo-janela">
            <div class="janela-nome">Configurações de usuário</div>
            <div class="icones">
                <i class="fa-regular fa-window-minimize minimizar"></i>
                <i class="fa-solid fa-xmark fechar"></i>
            </div>
        </div>
        <div class="soel-content">
            <div class="soel-content-area">
                <div>
                    <div style="width: 100%">
                        <div class="soel-form-field  col-3 mb-2">
                            <label for="posicao-abas" class='form-label'>Controle de abas</label>
                            <label for="posicao-abas" class="label-select">
                                <select name="posicao-abas" id="posicao-abas">
                                    <option value="controle-abas-inferior" @if ($posicaoAbas == 'controle-abas-inferior') selected @endif>Inferior</option>
                                    <option value="controle-abas-superior" @if ($posicaoAbas == 'controle-abas-superior') selected @endif>Superior</option>
                                </select>
                                <svg><polyline points="1 1 5 5 9 1"></polyline></svg>
                            </label>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div class="soel-form-field  col-3 mb-2">
                            <label for="tema" class='form-label'>Seleção de tema</label>
                            <label for="tema" class="label-select">
                                <select name="tema" id="tema">
                                    <option value="tema-padrao" @if ($tema == 'tema-padrao') selected @endif>Padrão</option>
                                    <option value="tema-secundario" @if ($tema == 'tema-secundario') selected @endif>Secundário</option>
                                    <option value="tema-classico" @if ($tema == 'tema-classico') selected @endif>Clássico</option>
                                </select>
                                <svg><polyline points="1 1 5 5 9 1"></polyline></svg>
                            </label>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div class="tema-demonstracao">
                            <div class="highlight"></div>
                            <div class="highlight-bold"></div>
                            <div class="highlight-bolder"></div>
                            <div class="button-danger"></div>
                            <div class="secondary"></div>
                            <div class="background"></div>
                            <div class="primary"></div>
                            <div class="tertiary"></div>
                            <div class="stroke"></div>
                            <div class="button"></div>
                            <div class="button-highlight"></div>
                            <div class="button-text"></div>
                            <div class="paragraph"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>