<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
  <meta charset="utf-8">
  <title>{{ app_name }}</title>

  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

  <link rel="stylesheet" href="/static/css/style.css">

  <script defer src="/static/js/i18n.js"></script>
  <script defer src="/static/js/app.js"></script>
</head>

<body>

<div class="container">

  <header class="header" style="display:flex; justify-content:space-between; align-items:center; gap:20px">

    <div>
      <h1 data-i18n="app.title">{{ app_name }}</h1>
      <div class="version">v{{ app_version }}</div>
    </div>

    <div style="display:flex; gap:10px; align-items:center">

      <button type="button" class="lang-btn" data-lang="de">DE</button>
      <button type="button" class="lang-btn" data-lang="en">EN</button>

      <a class="github-btn"
         href="https://github.com/bylickilabs"
         target="_blank"
         title="GitHub Repository">
        <i class="bi bi-github"></i>
      </a>

      <button type="button" id="infoBtn" title="Info">ℹ️</button>

    </div>
  </header>

  <section class="card">
    <h2 data-i18n="api.title">API</h2>
    <p data-i18n="api.desc">Aktiver Development Token:</p>
    <code>admin-dev-token</code>
  </section>

<section class="card">
  <h2 data-i18n="scan.title">Projekt scannen</h2>

  <form id="scanForm" method="post" action="/scan" enctype="multipart/form-data">

    <p>
      <label data-i18n="scan.zip">Projekt (ZIP)</label><br>
      <input id="zipFile" type="file" name="file" required>
    </p>

    <p>
      <label data-i18n="scan.profile">Profil</label><br>
      <select name="profile">
        <option value="BASE">BASE</option>
        <option value="OWASP">OWASP</option>
        <option value="CIS">CIS</option>
      </select>
    </p>

    <p>
      <label data-i18n="scan.token">API Token</label><br>
      <input type="text" name="token" value="admin-dev-token" required>
    </p>

    <button type="submit" data-i18n="scan.start">Scan starten</button>
  </form>
</section>

  {% if result %}
  <section class="card">

    <h2 data-i18n="result.title">Scan Resultate</h2>

    <p><strong data-i18n="result.profile">Profil:</strong> {{ result.profile }}</p>
    <p><strong data-i18n="result.level">Risk Level:</strong> {{ result.risk_level }}</p>
    <p><strong data-i18n="result.score">Risk Score:</strong> {{ result.risk_score }}</p>
    <p><strong data-i18n="result.files">Files Scanned:</strong> {{ result.files_scanned }}</p>

    <hr>

    <h3 data-i18n="result.findings">Detaillierte Findings</h3>

    {% if result.findings and result.findings|length > 0 %}
      <table border="1" width="100%" cellpadding="6">
        <thead>
          <tr>
            <th>Severity</th>
            <th>Datei</th>
            <th>Beschreibung</th>
          </tr>
        </thead>
        <tbody>
          {% for f in result.findings %}
          <tr>
            <td>{{ f.severity }}</td>
            <td>{{ f.file }}</td>
            <td>{{ f.message }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p data-i18n="result.none">Keine Findings erkannt.</p>
    {% endif %}

  </section>
  {% endif %}

  {% if error %}
  <section class="card">
    <strong data-i18n="error.title">Fehler:</strong> {{ error }}
  </section>
  {% endif %}

</div>

<div id="infoModal" class="modal hidden">
  <div class="modal-content">
    <h2 data-i18n="info.title">Über diese Anwendung</h2>
    <p data-i18n="info.text">
      Dieses Tool dient der lokalen Sicherheits- und Compliance-Analyse
      von Softwareprojekten.
    </p>
    <button id="closeInfo" data-i18n="info.close">Schließen</button>
  </div>
</div>

</body>
</html>