{% load common_tags %}
{% load i18n %}

{% if is_own_profile %}
{% include "partials/employee-profile-hr-requests.html" %}
{% endif %}

<div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden;">

    {% if employee.manager or manager_chain or subordinates or employee.groups.all %}
    <div style="padding:1rem 1.25rem;{% if can_view_pii %} border-bottom:1px solid var(--color-border);{% endif %}">
        <h3 style="font-size:0.8125rem; font-weight:600; margin-bottom:0.75rem;">{% trans "Структура" %}</h3>
        <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem 1.5rem; font-size:0.8125rem;">
            {% if employee.manager %}
            <div>
                <div style="font-size:0.6875rem; color:var(--color-muted-foreground); margin-bottom:0.375rem;">{% trans "Руководитель" %}</div>
                <a href="/employees/{{ employee.manager.pk }}/?tab=overview" hx-get="/employees/{{ employee.manager.pk }}/?tab=overview" hx-target="#main-content" hx-push-url="/employees/{{ employee.manager.pk }}/?tab=overview" hx-indicator="#loader" style="display:inline-flex; align-items:center; gap:0.5rem; color:var(--color-primary); text-decoration:none;">
                    <span style="width:1.5rem; height:1.5rem; border-radius:50%; background:color-mix(in srgb, var(--color-primary) 10%, transparent); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:600;">{{ employee.manager|initials }}</span>
                    {{ employee.manager.get_full_name }}
                </a>
            </div>
            {% endif %}
            {% if employee.groups.all %}
            <div>
                <div style="font-size:0.6875rem; color:var(--color-muted-foreground); margin-bottom:0.375rem;">{% trans "Группы доступа" %}</div>
                <div style="display:flex; flex-wrap:wrap; gap:0.375rem;">
                    {% for group in employee.groups.all %}
                    <span class="badge badge-muted">{{ group.name }}</span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
        {% if subordinates %}
        <div style="margin-top:1rem; padding-top:1rem; border-top:1px solid var(--color-border);">
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); margin-bottom:0.5rem;">{% trans "Подчинённые" %} · {{ subordinates|length }}</div>
            <div style="display:flex; flex-wrap:wrap; gap:0.5rem 1rem;">
                {% for sub in subordinates %}
                <a href="/employees/{{ sub.pk }}/?tab=overview" hx-get="/employees/{{ sub.pk }}/?tab=overview" hx-target="#main-content" hx-push-url="/employees/{{ sub.pk }}/?tab=overview" hx-indicator="#loader"
                   style="display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none; padding:0.375rem 0.625rem 0.375rem 0.375rem; border-radius:0.5rem; border:1px solid var(--color-border); background:var(--color-muted);">
                    <span style="width:1.5rem; height:1.5rem; border-radius:50%; background:color-mix(in srgb, var(--color-primary) 10%, transparent); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:600;">{{ sub|initials }}</span>
                    <span>
                        <span style="display:block; font-size:0.8125rem; color:var(--color-foreground);">{{ sub.get_full_name }}</span>
                        {% if sub.post %}<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">{{ sub.post.name }}</span>{% endif %}
                    </span>
                </a>
                {% endfor %}
            </div>
        </div>
        {% elif employee.is_manager %}
        <div style="margin-top:0.75rem; font-size:0.8125rem; color:var(--color-muted-foreground);">{% trans "Нет подчинённых" %}</div>
        {% endif %}
        {% if manager_chain|length > 1 %}
        <div style="margin-top:1rem; padding-top:1rem; border-top:1px solid var(--color-border);">
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); margin-bottom:0.5rem;">{% trans "Цепочка руководства" %}</div>
            <div style="display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; font-size:0.8125rem;">
                {% for mgr in manager_chain %}
                {% if not forloop.first %}<span style="color:var(--color-muted-foreground);">→</span>{% endif %}
                <a href="/employees/{{ mgr.pk }}/?tab=overview" hx-get="/employees/{{ mgr.pk }}/?tab=overview" hx-target="#main-content" hx-push-url="/employees/{{ mgr.pk }}/?tab=overview" hx-indicator="#loader" style="color:var(--color-primary); text-decoration:none;">{{ mgr.get_full_name }}</a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {% if can_view_pii %}
    <div style="padding:1rem 1.25rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; font-size:0.8125rem; align-items:center;">
        {% if employee.hire_date %}
        <div>
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); margin-bottom:0.125rem;">{% trans "Стаж" %}</div>
            <div>{% trans "с" %} {{ employee.hire_date|date:"d.m.Y" }} · {{ employee.work_experience }} {% trans "л." %} · {{ employee.get_employment_type_display }}</div>
        </div>
        {% endif %}
        {% if last_attendance %}
        <div>
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); margin-bottom:0.125rem;">{% trans "Последнее посещение" %}</div>
            <div>{% if last_attendance.direction == 'in' %}{% trans "Приход" %}{% else %}{% trans "Выход" %}{% endif %} · {{ last_attendance.timestamp|date:"d.m.Y H:i" }} · {{ last_attendance.location.name }}</div>
        </div>
        {% endif %}
        <div style="display:flex; gap:0.75rem; align-items:center; margin-left:auto;">
            <span style="font-size:0.6875rem; color:var(--color-muted-foreground);">Mattermost</span>
            {% if employee.mattermost_sync_status == 'synced' %}<span class="badge badge-success">OK</span>{% elif employee.mattermost_sync_status == 'error' %}<span class="badge badge-danger">{% trans "Ошибка" %}</span>{% else %}<span class="badge badge-muted">—</span>{% endif %}
            <span style="font-size:0.6875rem; color:var(--color-muted-foreground); margin-left:0.5rem;">AD</span>
            {% if employee.ad_sync_status == 'synced' %}<span class="badge badge-success">OK</span>{% elif employee.ad_sync_status == 'error' %}<span class="badge badge-danger">{% trans "Ошибка" %}</span>{% else %}<span class="badge badge-muted">—</span>{% endif %}
        </div>
        <button type="button" class="btn btn-ghost" style="font-size:0.75rem; padding:0.2rem 0.5rem;" onclick="empProfileTabSwitch('work')">{% trans "Кадровые данные" %}</button>
    </div>
    {% elif not is_own_profile and not can_view_pii %}
    <div style="padding:0.875rem 1.25rem; font-size:0.8125rem; color:var(--color-muted-foreground); border-top:1px solid var(--color-border);">
        {% trans "Контакты доступны руководителю и HR." %}
        <button type="button" class="btn btn-ghost" style="font-size:0.75rem; margin-left:0.25rem; padding:0.2rem 0.5rem;" onclick="empProfileTabSwitch('work')">{% trans "Место работы" %}</button>
    </div>
    {% endif %}
</div>

{% if recent_tasks %}
<div style="margin-top:1rem; background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden;">
    <div style="padding:0.75rem 1.25rem; border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; gap:0.75rem;">
        <h3 style="font-size:0.8125rem; font-weight:600; margin:0;">{% trans "Задачи" %} · {{ recent_tasks_total }}</h3>
        <a href="/tasks/?responsible={{ employee.pk }}" hx-get="/tasks/?responsible={{ employee.pk }}" hx-target="#main-content" hx-push-url="/tasks/?responsible={{ employee.pk }}" hx-indicator="#loader" style="font-size:0.75rem; color:var(--color-primary); text-decoration:none;">{% trans "Все задачи" %}</a>
    </div>
    {% for task in recent_tasks %}
    <a href="/tasks/{{ task.pk }}/" hx-get="/tasks/{{ task.pk }}/" hx-target="#main-content" hx-push-url="/tasks/{{ task.pk }}/" hx-indicator="#loader" class="li-hover" style="display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.625rem 1.25rem; border-bottom:1px solid var(--color-border); text-decoration:none;">
        <div style="min-width:0;">
            <div style="font-size:0.8125rem; color:{% if task.status == 'done' %}var(--color-muted-foreground); text-decoration:line-through;{% else %}var(--color-foreground);{% endif %} overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ task.title|truncatechars:80 }}</div>
            <div style="font-size:0.75rem; color:var(--color-muted-foreground);">
                {% if task.status == 'done' %}{% trans "Выполнено" %}{% elif task.status == 'in_progress' %}{% trans "В работе" %}{% else %}{% trans "Ожидает" %}{% endif %}
                {% if task.due_date %} · {% trans "до" %} {{ task.due_date|date:"d.m.Y" }}{% endif %}
            </div>
        </div>
        <span class="badge {{ task.priority_badge }}" style="flex-shrink:0;">{{ task.get_priority_display }}</span>
    </a>
    {% endfor %}
    {% if recent_tasks_hidden %}
    <div style="padding:0.5rem 1.25rem; text-align:center; font-size:0.75rem; color:var(--color-muted-foreground);">{% trans "и ещё" %} {{ recent_tasks_hidden }}…</div>
    {% endif %}
</div>
{% endif %}

{% if is_own_profile %}
<p style="margin-top:0.75rem; font-size:0.75rem; color:var(--color-muted-foreground);">{% trans "Служебные данные (должность, отдел, рабочий email) редактирует администратор." %}</p>
{% endif %}