
{% extends "base.html" %}
{% block title %}{{title|default:"Page not found"}}-{% endblock %}

{% block body_main %}
<div class="container" style="min-height:80vh">
  <div class="row">
    <div class="col-md-6 offset-md-3 text-center p-md-5 p-3">
      <div class="alert alert-{{status|yesno:'danger,secondary'}}">
        <p class="fw-bold" style="font-size: 300%">
          <i class="bi bi-emoji-{{status|yesno:'frown,expressionless'}}"></i>
          <br>{{status}}
        </p>
        <div style="font-size: 200%">{{title}}</div>
        {% if message %}
        <p class="mt-3">{{message}}</p>
        {% endif %}
      </div>
      <div id="ShowDiv"></div>
    </div>
  </div>
</div>

<script>
  const redirectConfig = {
    delay: 6,
    enableRedirect: {{status|yesno:'false,true'}}
  }
  
  function startCountdown() {
    let counter = redirectConfig.delay
    const countdownEl = document.getElementById('ShowDiv')
    
    const timer = setInterval(() => {
      countdownEl.innerHTML = `
        <h4 style="font-size: 200%">
          还有<span style="color:red">${counter}</span>秒返回
        </h4>
      `
      if (--counter < 0) {
        clearInterval(timer)
        window.location.href = '{{error_render}}'
        //if(redirectConfig.enableRedirect) {
        //  window.location.href = redirectConfig.targetUrl || fallbackUrl
        //}
      }
    }, 1000)
  }
  
  document.addEventListener('DOMContentLoaded', startCountdown)
</script>
{% endblock %}
