<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resume Analysis Results</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='results.css') }}" />
    <style>
      .result-content {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        line-height: 1.8;
        white-space: pre-wrap;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      .results-card {
        margin: 20px 0;
      }
      .summary {
        background: #e9ecef;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
      }
      .summary p {
        margin: 8px 0;
      }
    </style>
  </head>
  <body>
    <div class="results-container">
      <h1>🎯 AI Resume Analysis Results</h1>

      <div class="summary">
        <p>
          <strong>📄 Uploaded File:</strong> <span id="fileName">{{ filename }}</span>
        </p>
        {% if job_description %}
        <p>
          <strong>💼 Job Description:</strong> Provided
        </p>
        {% endif %}
      </div>

      <div class="analysis-section">
        <div class="card results-card">
          <h3>📊 Analysis Results</h3>
          <div class="result-content">{{ result }}</div>
        </div>
      </div>

      <button id="backBtn">← Upload Another Resume</button>
    </div>

    <script src="{{ url_for('static', filename='results.js') }}"></script>
  </body>
</html>