{% extends 'web/base_modern.html' %}
{% load static %}

{% block title %}{{ vacancy.title }} - Вакансии - SmartSolTech{% endblock %}

{% block content %}
<section class="section-padding">
    <div class="container" style="max-width: 900px;">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Главная</a></li>
                <li class="breadcrumb-item"><a href="{% url 'career_list' %}">Вакансии</a></li>
                <li class="breadcrumb-item active">{{ vacancy.title }}</li>
            </ol>
        </nav>

        <!-- Vacancy Header -->
        <div class="mb-5">
            <h1 class="display-5 fw-bold mb-3">{{ vacancy.title }}</h1>
            <div class="d-flex flex-wrap gap-3 mb-3">
                {% if vacancy.location %}
                <span class="text-muted">
                    <i class="fas fa-map-marker-alt"></i> {{ vacancy.location }}
                </span>
                {% endif %}
                <span class="badge bg-primary">
                    {{ vacancy.get_employment_type_display }}
                </span>
                <span class="text-muted">
                    <i class="far fa-calendar"></i> Опубликовано: {{ vacancy.posted_at|date:"d.m.Y" }}
                </span>
            </div>
            {% if vacancy.salary_min or vacancy.salary_max %}
            <div class="mb-3">
                <strong class="text-primary h4">
                    {% if vacancy.salary_min and vacancy.salary_max %}
                        {{ currency_symbol }}{{ vacancy.salary_min|floatformat:0 }} - {{ currency_symbol }}{{ vacancy.salary_max|floatformat:0 }}
                    {% elif vacancy.salary_min %}
                        От {{ currency_symbol }}{{ vacancy.salary_min|floatformat:0 }}
                    {% else %}
                        До {{ currency_symbol }}{{ vacancy.salary_max|floatformat:0 }}
                    {% endif %}
                </strong>
            </div>
            {% endif %}
        </div>

        <!-- Responsibilities -->
        <div class="card-modern mb-4">
            <div class="card-body">
                <h3 class="mb-4"><i class="fas fa-tasks text-primary me-2"></i> Обязанности</h3>
                <div class="vacancy-content">
                    {{ vacancy.responsibilities|linebreaks }}
                </div>
            </div>
        </div>

        <!-- Requirements -->
        <div class="card-modern mb-4">
            <div class="card-body">
                <h3 class="mb-4"><i class="fas fa-check-circle text-success me-2"></i> Требования</h3>
                <div class="vacancy-content">
                    {{ vacancy.requirements|linebreaks }}
                </div>
            </div>
        </div>

        <!-- Desirable -->
        {% if vacancy.desirable %}
        <div class="card-modern mb-4">
            <div class="card-body">
                <h3 class="mb-4"><i class="fas fa-star text-warning me-2"></i> Будет плюсом</h3>
                <div class="vacancy-content">
                    {{ vacancy.desirable|linebreaks }}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Apply Button -->
        <div class="text-center mt-5 mb-4">
            <a href="mailto:hr@smartsoltech.kr?subject=Отклик на вакансию: {{ vacancy.title }}" class="btn btn-primary btn-lg">
                <i class="fas fa-paper-plane me-2"></i> Откликнуться на вакансию
            </a>
        </div>

        <!-- Back to Careers -->
        <div class="text-center mt-4">
            <a href="{% url 'career_list' %}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-2"></i> Все вакансии
            </a>
        </div>
    </div>
</section>
{% endblock %}