{% extends "layouts/main.html" %}
{% block title %}500{% endblock %}
{% block content %}
<div class="auth-container">
  <div class="glass-card auth-card">
    <div class="auth-logo">500</div>
    <p class="auth-subtitle">{{ t(key="page.500", default="서버 오류가 발생했습니다") }}</p>

    {# 개발 모드: 에러 메시지 + 스택 트레이스 표시 #}
    {% if config.debug and error %}
    <div class="error-detail">
      <p class="error-message">{{ error.message }}</p>
      {% if error.stack %}
      <pre class="error-stack">{{ error.stack }}</pre>
      {% endif %}
    </div>
    {% endif %}

    <a href="/" class="btn btn-primary btn-full">{{ t(key="btn.go_home", default="홈으로") }}</a>
  </div>
</div>

<style>
.error-detail {
  margin: 1.5rem 0;
  text-align: left;
}
.error-message {
  color: var(--danger, #e74c3c);
  font-weight: 600;
  margin-bottom: 0.75rem;
  word-break: break-all;
}
.error-stack {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary, #aaa);
  padding: 1rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.75rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
}
</style>
{% endblock %}