{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

{% if LANGUAGE_CODE == 'en' %}
    <h5> {% trans "AI Score" %}: <span class="badge bg-success"><i class="fas fa-robot me-1"></i> {{ application.match_score }}%</span>   <span class="badge bg-success"><i class="fas fa-graduation-cap me-1"></i> {{ application.professional_category }} </span></h5>

    <div class="row mb-3">
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-briefcase me-2 text-primary"></i>
                <small class="text-muted">{% trans "Job Fit" %}</small>
            </div>
            <p class="mb-1">{{ application.job_fit_narrative }}</p>
        </div>
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-star me-2 text-warning"></i>
                <small class="text-muted">{% trans "Top Keywords" %}</small>
            </div>
            <div class="d-flex flex-wrap gap-1">
                {% for keyword in application.top_3_keywords %}
                <span class="badge bg-info text-dark me-1">{{ keyword }}</span>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-clock me-2 text-info"></i>
                <small class="text-muted">{% trans "Experience" %}</small>
            </div>
            <p class="mb-1"><strong>{{ application.years_of_experience }}</strong> {% trans "years" %}</p>
            <p class="mb-0"><strong>{% trans "Recent Role:" %}</strong> {{ application.most_recent_job_title }}</p>
        </div>
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-chart-line me-2 text-success"></i>
                <small class="text-muted">{% trans "Skills" %}</small>
            </div>
            <p class="mb-1"><strong>{% trans "Soft Skills:" %}</strong> {{ application.soft_skills_score }}%</p>
            <p class="mb-0"><strong>{% trans "Industry Match:" %}</strong>
                <span class="badge {% if application.industry_match_score >= 70 %}bg-success{% elif application.industry_match_score >= 40 %}bg-warning{% else %}bg-danger{% endif %}">
                    {{ application.industry_match_score }}%
                </span>
            </p>
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-comment me-1 text-info"></i> {% trans "Recommendation" %}</label>
        <textarea class="form-control" rows="6" readonly>{{ application.recommendation }}</textarea>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-thumbs-up me-1 text-success"></i> {% trans "Strengths" %}</label>
        <textarea class="form-control" rows="4" readonly>{{ application.strengths }}</textarea>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-thumbs-down me-1  text-danger"></i> {% trans "Weaknesses" %}</label>
        <textarea class="form-control" rows="4" readonly>{{ application.weaknesses }}</textarea>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-list-check me-1"></i> {% trans "Criteria Assessment" %}</label>
        <div class="table-responsive">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>{% trans "Criteria" %}</th>
                        <th>{% trans "Status" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for criterion, status in application.criteria_checklist.items %}
                    <tr>
                        <td>{{ criterion }}</td>
                        <td>
                            {% if status == "Met" %}
                                <span class="badge bg-success"><i class="fas fa-check me-1"></i> {% trans "Met" %}</span>
                            {% elif status == "Not Met" %}
                                <span class="badge bg-danger"><i class="fas fa-times me-1"></i> {% trans "Not Met" %}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ status }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-check-circle me-2 text-success"></i>
                <small class="text-muted">{% trans "Minimum Requirements" %}</small>
            </div>
            {% if application.min_requirements_met %}
                <span class="badge bg-success">{% trans "Met" %}</span>
            {% else %}
                <span class="badge bg-danger">{% trans "Not Met" %}</span>
            {% endif %}
        </div>
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-star me-2 text-warning"></i>
                <small class="text-muted">{% trans "Screening Rating" %}</small>
            </div>
            <span class="badge bg-secondary">{{ application.screening_stage_rating }}</span>
        </div>
    </div>

    {% if application.language_fluency %}
    <div class="mb-3">
        <label class="form-label"><i class="fas fa-language me-1 text-info"></i> {% trans "Language Fluency" %}</label>
        <div class="d-flex flex-wrap gap-2">
            {% for language in application.language_fluency %}
            <span class="badge bg-light text-dark">{{ language }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

{% else %}
    <h5> {% trans "AI Score" %}: <span class="badge bg-success"><i class="fas fa-robot me-1"></i> {{ application.match_score }}%</span>   <span class="badge bg-success"><i class="fas fa-graduation-cap me-1"></i> {{ application.professional_category_ar }} </span></h5>

    <div class="row mb-3">
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-briefcase me-2 text-primary"></i>
                <small class="text-muted">{% trans "Job Fit" %}</small>
            </div>
            <p class="mb-1">{{ application.job_fit_narrative_ar }}</p>
        </div>
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-star me-2 text-warning"></i>
                <small class="text-muted">{% trans "Top Keywords" %}</small>
            </div>
            <div class="d-flex flex-wrap gap-1">
                {% for keyword in application.top_3_keywords_ar %}
                <span class="badge bg-info text-dark me-1">{{ keyword }}</span>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-clock me-2 text-info"></i>
                <small class="text-muted">{% trans "Experience" %}</small>
            </div>
            <p class="mb-1"><strong>{{ application.years_of_experience }}</strong> {% trans "years" %}</p>
            <p class="mb-0"><strong>{% trans "Recent Role:" %}</strong> {{ application.most_recent_job_title_ar }}</p>
        </div>
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-chart-line me-2 text-success"></i>
                <small class="text-muted">{% trans "Skills" %}</small>
            </div>
            <p class="mb-1"><strong>{% trans "Soft Skills:" %}</strong> {{ application.soft_skills_score }}%</p>
            <p class="mb-0"><strong>{% trans "Industry Match:" %}</strong>
                <span class="badge {% if application.industry_match_score >= 70 %}bg-success{% elif application.industry_match_score >= 40 %}bg-warning{% else %}bg-danger{% endif %}">
                    {{ application.industry_match_score }}%
                </span>
            </p>
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-comment me-1 text-info"></i> {% trans "Recommendation" %}</label>
        <textarea class="form-control" rows="6" readonly>{{ application.recommendation_ar }}</textarea>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-thumbs-up me-1 text-success"></i> {% trans "Strengths" %}</label>
        <textarea class="form-control" rows="4" readonly>{{ application.strengths_ar }}</textarea>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-thumbs-down me-1  text-danger"></i> {% trans "Weaknesses" %}</label>
        <textarea class="form-control" rows="4" readonly>{{ application.weaknesses_ar }}</textarea>
    </div>

    <div class="mb-3">
        <label class="form-label"><i class="fas fa-list-check me-1"></i> {% trans "Criteria Assessment" %}</label>
        <div class="table-responsive">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>{% trans "Criteria" %}</th>
                        <th>{% trans "Status" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for criterion, status in application.criteria_checklist_ar.items %}
                    <tr>
                        <td>{{ criterion }}</td>
                        <td>
                            {% if status == "Met" %}
                                <span class="badge bg-success"><i class="fas fa-check me-1"></i> {% trans "Met" %}</span>
                            {% elif status == "Not Met" %}
                                <span class="badge bg-danger"><i class="fas fa-times me-1"></i> {% trans "Not Met" %}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ status }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-check-circle me-2 text-success"></i>
                <small class="text-muted">{% trans "Minimum Requirements" %}</small>
            </div>
            {% if application.min_requirements_met_ar %}
                <span class="badge bg-success">{% trans "Met" %}</span>
            {% else %}
                <span class="badge bg-danger">{% trans "Not Met" %}</span>
            {% endif %}
        </div>
        <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
                <i class="fas fa-star me-2 text-warning"></i>
                <small class="text-muted">{% trans "Screening Rating" %}</small>
            </div>
            <span class="badge bg-secondary">{{ application.screening_stage_rating_ar }}</span>
        </div>
    </div>

    {% if application.language_fluency_ar %}
    <div class="mb-3">
        <label class="form-label"><i class="fas fa-language me-1 text-info"></i> {% trans "Language Fluency" %}</label>
        <div class="d-flex flex-wrap gap-2">
            {% for language in application.language_fluency_ar %}
            <span class="badge bg-light text-dark">{{ language }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

{% endif %}