<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Framefox Debug - {{ exception_type }}</title>
    <link rel="icon" href="/static/images/orange_fox.png" type="image/x-icon" />
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
        color: #333;
      }

      header {
        background-color: #222;
        color: #fff;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        min-height: 60px;
      }

      .header-left {
        display: flex;
        align-items: center;
      }

      .logo {
        background-color: #f4bf5f;
        color: #333;
        padding: 5px 10px;
        font-weight: bold;
        margin-right: 20px;
        display: flex;
        align-items: center;
      }

      .logo img {
        height: 24px;
        margin-right: 5px;
      }

      .header-title {
        font-size: 24px;
        font-weight: normal;
        margin: 0;
      }

      .header-profiler-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: #f4bf5f;
        color: #333;
        padding: 10px 18px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
      }

      .header-profiler-link:hover {
        background-color: #e5a94d;
        color: #333;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(244, 191, 95, 0.3);
      }

      .profiler-icon {
        font-size: 18px;
      }

      .container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 0 20px;
      }

      .panel-section {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }

      .panel-section h2 {
        color: #444;
        border-bottom: 2px solid #f4bf5f;
        padding-bottom: 8px;
        margin-bottom: 20px;
        font-size: 24px;
        margin-top: 0;
      }

      .panel-section h3 {
        color: #444;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
        margin-bottom: 15px;
        font-size: 18px;
      }

      .panel-table {
        width: 100%;
        border-collapse: collapse;
        background-color: #f9f9f9;
        border-radius: 5px;
        overflow: hidden;
      }

      .panel-table th,
      .panel-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }

      .panel-table th {
        background-color: #f0f0f0;
        width: 30%;
        font-weight: bold;
      }

      .exception-header {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
      }

      .exception-title {
        font-size: 28px;
        font-weight: bold;
        margin: 0 0 10px 0;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .exception-subtitle {
        opacity: 0.9;
        font-size: 16px;
        margin: 0;
      }

      .exception-badge {
        background-color: rgba(255, 255, 255, 0.2);
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .http-method {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: bold;
        color: white;
      }

      .http-method.GET {
        background-color: #28a745;
      }
      .http-method.POST {
        background-color: #17a2b8;
      }
      .http-method.PUT {
        background-color: #ffc107;
        color: #333;
      }
      .http-method.PATCH {
        background-color: #fd7e14;
      }
      .http-method.DELETE {
        background-color: #dc3545;
      }

      .status-code {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 3px;
        font-weight: bold;
        background-color: #f8d7da;
        color: #721c24;
      }

      .solutions-section {
        background-color: #e8f5e8;
        border: 1px solid #c3e6c3;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 20px;
      }

      .solutions-section h3 {
        margin-top: 0;
        color: #2d5a2d;
        border-bottom: 1px solid #c3e6c3;
      }

      .solutions-section ul {
        margin-bottom: 0;
      }

      .solutions-section li {
        margin-bottom: 8px;
        color: #2d5a2d;
        line-height: 1.5;
      }

      .solutions-section code {
        background-color: #d4edda;
        color: #155724;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
      }

      .stacktrace-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }

      .copy-button {
        background-color: #f4bf5f;
        color: #333;
        border: none;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .copy-button:hover {
        background-color: #e5a94d;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .copy-button.copied {
        background-color: #28a745;
        color: white;
      }

      .stacktrace-container {
        background-color: #2d3748;
        color: #e2e8f0;
        padding: 20px;
        border-radius: 5px;
        overflow-x: auto;
        font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
        font-size: 13px;
        line-height: 1.6;
        white-space: pre-wrap;
        border: 1px solid #4a5568;
        margin: 0;
      }

      .info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .panel-section {
        animation: fadeIn 0.5s ease-out;
      }

      .header-profiler-link:focus,
      .copy-button:focus {
        outline: 2px solid #f4bf5f;
        outline-offset: 2px;
      }

      ::selection {
        background: rgba(244, 191, 95, 0.3);
        color: #333;
      }

      .stacktrace-container .highlight {
        background-color: rgba(255, 255, 0, 0.2);
        padding: 0 2px;
        border-radius: 2px;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="header-left">
        <div class="logo">
          <img src="/static/images/orange_fox.png" alt="Framefox" />DEBUG
        </div>
        <h1 class="header-title">Exception</h1>
      </div>

      {% if profiler_token %}
      <a
        href="/_profiler/{{ profiler_token }}"
        class="header-profiler-link"
        target="_blank"
        title="View detailed request profile"
      >
        View Profile
      </a>
      {% else %}
      <a
        href="/_profiler"
        class="header-profiler-link"
        target="_blank"
        title="View profiler dashboard"
      >
        View Profiler
      </a>
      {% endif %}
    </header>

    <div class="container">
      <div class="exception-header">
        <h1 class="exception-title">
          <span class="exception-badge">{{ exception_type }}</span>
          {{ exception_message }}
        </h1>
        <p class="exception-subtitle">
          Error occurred while processing
          <span class="http-method {{ request.method }}"
            >{{ request.method }}</span
          >
          {{ request.url.path }}
        </p>
      </div>

      <div class="info-grid">
        <div class="panel-section">
          <h3>🌐 Request Information</h3>
          <table class="panel-table">
            <tr>
              <th>Method</th>
              <td>
                <span class="http-method {{ request.method }}"
                  >{{ request.method }}</span
                >
              </td>
            </tr>
            <tr>
              <th>URL</th>
              <td><code>{{ request.url }}</code></td>
            </tr>
            <tr>
              <th>Path</th>
              <td><code>{{ request.url.path }}</code></td>
            </tr>
            <tr>
              <th>Status Code</th>
              <td><span class="status-code">500</span></td>
            </tr>
            <tr>
              <th>Client IP</th>
              <td>
                <code
                  >{{ request.client.host if request.client else 'Unknown'
                  }}</code
                >
              </td>
            </tr>
            {% if request.headers.get('user-agent') %}
            <tr>
              <th>User Agent</th>
              <td
                style="
                  font-family: monospace;
                  font-size: 12px;
                  word-break: break-all;
                "
              >
                {{ request.headers.get('user-agent')[:100] }}{% if
                request.headers.get('user-agent')|length > 100 %}...{% endif %}
              </td>
            </tr>
            {% endif %}
          </table>
        </div>
      </div>

      <div class="solutions-section">
        <h3>💡 Quick Solutions</h3>
        {% if exception_type == "TypeError" and "JSON serializable" in
        exception_message %}
        <p><strong>JSON Serialization Error:</strong></p>
        <ul>
          <li>
            Check for Python <code>set()</code> objects in your data - use
            <code>list()</code> instead
          </li>
          <li>
            Verify all data types are JSON serializable (str, int, list, dict,
            bool, None)
          </li>
          <li>
            Use <code>json.dumps(data, default=str)</code> for complex objects
          </li>
          <li>Check for datetime objects - convert them to strings first</li>
        </ul>
        {% elif exception_type == "AttributeError" %}
        <p><strong>Attribute Error:</strong></p>
        <ul>
          <li>Check if the object has the attribute you're trying to access</li>
          <li>Verify the object is not None before accessing attributes</li>
          <li>
            Use <code>hasattr(object, 'attribute')</code> to safely check for
            attributes
          </li>
          <li>Check for typos in attribute names</li>
        </ul>
        {% elif exception_type == "ImportError" or exception_type ==
        "ModuleNotFoundError" %}
        <p><strong>Import Error:</strong></p>
        <ul>
          <li>
            Check if the module is installed:
            <code>pip install module_name</code>
          </li>
          <li>Verify the module path and spelling</li>
          <li>Check your PYTHONPATH configuration</li>
          <li>Make sure you're in the correct virtual environment</li>
        </ul>
        {% elif exception_type == "KeyError" %}
        <p><strong>Key Error:</strong></p>
        <ul>
          <li>Check if the key exists in the dictionary before accessing it</li>
          <li>
            Use <code>dict.get('key', default_value)</code> for safe access
          </li>
          <li>Verify the key spelling and case sensitivity</li>
          <li>
            Print the dictionary keys to debug: <code>print(dict.keys())</code>
          </li>
        </ul>
        {% elif exception_type == "IndexError" %}
        <p><strong>Index Error:</strong></p>
        <ul>
          <li>
            Check if the list/array has enough elements before accessing by
            index
          </li>
          <li>Use <code>len(list)</code> to verify the list size</li>
          <li>Remember that Python uses 0-based indexing</li>
          <li>Use try/except for safe index access</li>
        </ul>
        {% else %}
        <p><strong>General Debugging Tips:</strong></p>
        <ul>
          <li>
            Check the stack trace below for the exact line causing the error
          </li>
          <li>Verify your input data and parameters</li>
          <li>
            Use the profiler button above to get detailed request information
          </li>
          <li>Check application logs for additional context</li>
          <li>Add debugging print statements to trace the execution flow</li>
        </ul>
        {% endif %}
      </div>

      {% if traceback %}
      <div class="panel-section">
        <div class="stacktrace-header">
          <h3>🔍 Stack Trace</h3>
          <button class="copy-button" onclick="copyStackTrace()" id="copyBtn">
            <span id="copyIcon">📋</span>
            <span id="copyText">Copy</span>
          </button>
        </div>
        <pre class="stacktrace-container" id="stacktrace">{{ traceback }}</pre>
      </div>
      {% endif %}
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.addEventListener("keydown", function (e) {
          if (e.ctrlKey && e.key === "p") {
            e.preventDefault();
            const profilerLink = document.querySelector(
              ".header-profiler-link"
            );
            if (profilerLink) {
              profilerLink.click();
            }
          }
        });

        document.addEventListener("keydown", function (e) {
          if (e.ctrlKey && e.shiftKey && e.key === "C") {
            e.preventDefault();
            copyStackTrace();
          }
        });
      });

      function copyStackTrace() {
        const stacktrace = document.getElementById("stacktrace").textContent;
        const copyBtn = document.getElementById("copyBtn");
        const copyIcon = document.getElementById("copyIcon");
        const copyText = document.getElementById("copyText");

        navigator.clipboard
          .writeText(stacktrace)
          .then(() => {
            copyBtn.classList.add("copied");
            copyIcon.textContent = "✓";
            copyText.textContent = "Copied!";

            setTimeout(() => {
              copyBtn.classList.remove("copied");
              copyIcon.textContent = "📋";
              copyText.textContent = "Copy";
            }, 2000);
          })
          .catch((err) => {
            console.error("Could not copy text: ", err);

            const range = document.createRange();
            range.selectNode(document.getElementById("stacktrace"));
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);

            copyText.textContent = "Select & Copy";
            setTimeout(() => {
              copyText.textContent = "Copy";
            }, 2000);
          });
      }
    </script>
  </body>
</html>
