<style>
  .error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
  }
  .error-page-content {
    max-width: 600px;
  }
  .error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    color: var(--pico-primary);
  }
  .error-code {
    font-size: 4rem;
    font-weight: 700;
    color: var(--pico-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
  }
  .error-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .error-description {
    margin-bottom: 2rem;
    opacity: 0.8;
  }
  .error-id-box {
    background: var(--pico-card-background-color);
    border: 2px solid var(--pico-primary);
    border-radius: var(--pico-border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
  .error-id-label {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    opacity: 0.9;
  }
  .error-id-code {
    display: block;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
  }
  .error-id-code:hover {
    border-color: var(--pico-primary);
    background: var(--pico-primary-focus);
  }
  .copy-feedback {
    display: none;
    margin-top: 0.5rem;
    color: #2ecc71;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .copy-feedback.show {
    display: block;
  }
</style>

<div class="error-page">
  <div class="error-page-content">
    <svg class="error-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
    </svg>

    <div class="error-code">500</div>
    <h1 class="error-title">Internal Server Error</h1>
    <p class="error-description">We're sorry, but something went wrong on our end.</p>

    <% if @event_id.present? %>
      <div class="error-id-box">
        <p class="error-id-label">
          If you need help, please provide this error ID:
        </p>
        <code
          class="error-id-code"
          data-error-id="<%= @event_id %>"
          onclick="copyErrorId(this)"
          title="Click to copy">
          <%= @event_id %>
        </code>
        <div class="copy-feedback">✓ Copied to clipboard!</div>
      </div>
    <% end %>

    <a href="/" role="button">Go back home</a>
  </div>
</div>
