backend/templates/my_applications.html

{% extends "base.html" %}

{% block title %}My Applications - Codingo{% endblock %}

{% block content %}
<section class="content-section">
    <div class="section-title">
        <h2>My Applications</h2>
        <p>Your submitted job applications are listed below.</p>
    </div>

    <ul class="breadcrumbs">
        <li><a href="{{ url_for('index') }}">Home</a></li>
        <li>My Applications</li>
    </ul>

    <div class="application-list">
        {% if applications %}
            {% for application in applications %}
                <div class="application-card">
                    <div class="application-header">
                        <h3>{{ application.job.role if application.job else 'Unknown Role' }}</h3>
                        <div class="application-info">
                            <span>{{ application.job.company if application.job else '' }}</span>
                            <span>Status: {{ application.status }}</span>
                        </div>
                    </div>
                    <div class="application-body">
                        <p>Applied on {{ application.date_applied.strftime('%B %d, %Y') }}</p>
                        {% if application.job %}
                            <p>{{ application.job.description[:150] }}{% if application.job.description|length > 150 %}...{% endif %}</p>
                        {% endif %}
                    </div>
                    <div class="application-footer">
                        {% if application.job %}
                            <a href="{{ url_for('job_detail', job_id=application.job.id) }}" class="btn btn-outline">View Job</a>
                        {% endif %}
                        {% if application.extracted_features %}
                            <!-- Offer to take the interview if CV data exists -->
                            <a href="{{ url_for('interview_page', job_id=application.job.id) }}" class="btn btn-primary">Take Interview</a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="card">
                <div class="card-body">
                    <p>You haven't applied to any jobs yet. Browse available positions on the <a href="{{ url_for('jobs') }}">jobs page</a>.</p>
                </div>
            </div>
        {% endif %}
    </div>
</section>

<style>
.application-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.application-card {
    background-color: var(--light);
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}

.application-header h3 {
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.application-info span {
    margin-right: 1rem;
    color: var(--dark);
    font-weight: 500;
}

.application-footer {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
</style>
{% endblock %}