{% 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> -->

    <!-- Prominent interview tips moved from the apply page.  This section is placed
         near the top of the My Applications page so candidates see the
         guidelines before initiating their AI interview.  It is responsive
         and uses colours consistent with the overall theme. -->
    <div class="tips-section">
        <h3>Important Interview Guidelines</h3>
        <ul>
            <li>The interview can be taken only once, so please be prepared.</li>
            <li>Make sure you are in a quiet environment with a stable internet connection.</li>
            <li>This is not a final job interview, but it helps the company shortlist the most relevant candidates.</li>
            <li>The interview is customized based on your CV and the job requirements.</li>
            <li>It takes 10 to 15 minutes and includes both general and skill‑based questions.</li>
        </ul>
    </div>

    <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;
}

/* Interview tips styling.  Creates a highlighted panel with a coloured
   border and responsive padding. */
.tips-section {
    background-color: #f8f9fa;
    border-left: 5px solid var(--primary);
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 8px;
}
.tips-section h3 {
    margin-top: 0;
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.tips-section ul {
    margin-left: 1rem;
    padding-left: 1rem;
    list-style-type: disc;
    line-height: 1.6;
}
@media (max-width: 600px) {
    .tips-section {
        padding: 1rem;
    }
}

/*
 * Improve visibility of the "View Job" button within each application card.
 * The default `.btn-outline` uses a white border which blends into the
 * light card background, making the button hard to see.  On this page we
 * override the outline button styling to use the primary colour for the
 * border and text.  On hover it fills with the primary colour for better
 * affordance while matching the overall theme.
 */
.application-footer .btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background-color: transparent;
}
.application-footer .btn-outline:hover {
    background-color: var(--primary);
    color: var(--light);
}
</style>
{% endblock %}