{% load i18n %}
<div class="page-content">

    <div style="margin-bottom:1.5rem;">
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Настройки" %}</h1>
        <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{% trans "Конфигурация портала" %}</p>
    </div>

    <div style="display:grid; grid-template-columns:220px 1fr; gap:1.5rem; align-items:start;">

        <!-- Бічне меню налаштувань -->
        <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:0.5rem; box-shadow:0 1px 2px rgb(0 0 0/0.05);">
            <div style="display:flex; flex-direction:column; gap:2px;">
                <a href="#" class="nav-item active" style="border-radius:0.375rem;">{% trans "Профиль компании" %}</a>
                <a href="#" class="nav-item" style="border-radius:0.375rem;">{% trans "Пользователи и роли" %}</a>
                <a href="#" class="nav-item" style="border-radius:0.375rem;">{% trans "Уведомления" %}</a>
                <a href="#" class="nav-item" style="border-radius:0.375rem;">{% trans "Интеграции" %}</a>
                <a href="#" class="nav-item" style="border-radius:0.375rem;">{% trans "Безопасность" %}</a>
            </div>
        </div>

        <!-- Контент -->
        <div style="display:flex; flex-direction:column; gap:1rem;">

            <!-- Профіль компанії -->
            <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:1.5rem; box-shadow:0 1px 2px rgb(0 0 0/0.05);">
                <h3 style="font-weight:600; color:var(--color-card-foreground); font-size:0.9375rem; margin-bottom:1.25rem;">{% trans "Профиль компании" %}</h3>
                <div style="display:flex; flex-direction:column; gap:1rem;">
                    <div>
                        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">{% trans "Название компании" %}</label>
                        <input type="text" value="АКС Аптека" class="input" style="width:100%; max-width:24rem;">
                    </div>
                    <div>
                        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">Email для сповіщень</label>
                        <input type="email" value="hr@aks-apteka.com.ua" class="input" style="width:100%; max-width:24rem;">
                    </div>
                    <div>
                        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">{% trans "Город / регион" %}</label>
                        <input type="text" value="Київ, Україна" class="input" style="width:100%; max-width:24rem;">
                    </div>
                </div>
                <div style="margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--color-border); display:flex; gap:0.5rem;">
                    <button class="btn btn-primary">{% trans "Сохранить" %}</button>
                    <button class="btn btn-secondary">{% trans "Отменить" %}</button>
                </div>
            </div>

            <!-- Робочий час -->
            <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:1.5rem; box-shadow:0 1px 2px rgb(0 0 0/0.05);">
                <h3 style="font-weight:600; color:var(--color-card-foreground); font-size:0.9375rem; margin-bottom:1.25rem;">{% trans "Рабочее время" %}</h3>
                <div style="display:flex; gap:1rem; align-items:flex-end;">
                    <div>
                        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">{% trans "Начало работы" %}</label>
                        <input type="time" value="09:00" class="input">
                    </div>
                    <div>
                        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.375rem;">{% trans "Конец работы" %}</label>
                        <input type="time" value="18:00" class="input">
                    </div>
                    <button class="btn btn-primary">{% trans "Сохранить" %}</button>
                </div>
            </div>

        </div>
    </div>

</div>