<!--
  templateType: page
  isAvailableForNewContent: false
  label: Maintenance Mode
  screenshotPath: ../../images/template-previews/maintenance.png
-->
{% extends "../layouts/base-system.html" %}

{% block title %}Under Maintenance{% endblock %}
{% block description %}We're currently performing scheduled maintenance. We'll be back soon!{% endblock %}

{% block page_class %}page-maintenance{% endblock %}

{% block icon %}
  <div class="system-icon icon-warning">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="3"/>
      <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"/>
      <path d="m20.5 7.5-3 3L15 8m-6 6-3 3L3.5 14.5M9 15l-3 3-2.5-2.5M15 9l3-3 2.5 2.5"/>
    </svg>
  </div>
{% endblock %}

{% block page_title %}We'll Be Right Back!{% endblock %}

{% block page_message %}
  We're currently performing scheduled maintenance to improve your experience. 
  Our team is working hard to get everything back online as quickly as possible.
{% endblock %}

{% block main_content %}
  <div class="system-progress">
    <div class="system-progress-fill"></div>
  </div>
  
  <div class="system-status info">
    <strong>Estimated Completion Time:</strong>
    <span id="completion-time">2 hours remaining</span>
  </div>
  
  <div class="system-section">
    <h3>Get notified when we're back online</h3>
    <form class="system-form" action="#" method="post" style="max-width: 100%;">
      <div class="form-group" style="display: flex; gap: 0.5rem;">
        <input type="email" placeholder="Enter your email" required style="flex: 1;">
        <button type="submit" class="btn btn-primary">Notify Me</button>
      </div>
    </form>
  </div>
{% endblock %}

{% block action_buttons %}
  <a href="javascript:location.reload()" class="btn btn-primary">Check Again</a>
  {% if site_settings.company_phone %}
    <a href="tel:{{ site_settings.company_phone }}" class="btn btn-secondary">Call Support</a>
  {% endif %}
{% endblock %}

{% block footer_info %}
  <div class="system-contact">
    <p>Need immediate assistance?</p>
    <p>
      {% if site_settings.company_email %}
        Email: <a href="mailto:{{ site_settings.company_email }}">{{ site_settings.company_email }}</a><br>
      {% endif %}
      {% if site_settings.company_phone %}
        Phone: <a href="tel:{{ site_settings.company_phone }}">{{ site_settings.company_phone }}</a>
      {% endif %}
    </p>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    const completionTime = document.getElementById('completion-time');
    if (completionTime) {
      const endTime = new Date();
      endTime.setHours(endTime.getHours() + 2);
      
      const updateTime = () => {
        const now = new Date();
        const diff = endTime - now;
        
        if (diff > 0) {
          const hours = Math.floor(diff / (1000 * 60 * 60));
          const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
          
          if (hours > 0) {
            completionTime.textContent = `${hours} hour${hours > 1 ? 's' : ''} ${minutes} minute${minutes > 1 ? 's' : ''} remaining`;
          } else {
            completionTime.textContent = `${minutes} minute${minutes > 1 ? 's' : ''} remaining`;
          }
        } else {
          completionTime.textContent = 'Should be complete - please refresh';
        }
      };
      
      updateTime();
      setInterval(updateTime, 60000);
    }
  </script>
{% endblock %}