{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Workspace Unavailable" %} - Eenos{% endblock %}
{% block extra_css %}
    <style>
.workspace-unavailable-card{max-width:720px;margin-inline:auto;padding:clamp(1.5rem,4vw,3rem);text-align:center;border-top:3px solid var(--eenos-warning)}
.workspace-unavailable-icon{width:76px;height:76px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--eenos-warning) 14%,var(--eenos-surface));color:var(--eenos-warning)}
.workspace-unavailable-icon svg{width:34px;height:34px;stroke-width:1.8}
.workspace-unavailable-help{max-width:520px;margin:1.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--eenos-border)}
    </style>
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Workspace Unavailable" %}</h1>
            <div class="eenos-page-subtitle">{% translate "The Workspace service cannot be reached right now." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "File Management" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Workspace" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Unavailable" %}</span>
    </nav>
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="eenos-card workspace-unavailable-card">
                <div class="workspace-unavailable-icon" aria-hidden="true">
                    <i data-lucide="server-off"></i>
                </div>
                <h2 class="h4 mb-3">{% translate "Workspace is temporarily unavailable" %}</h2>
                <p class="text-muted mb-0">{% translate "The Workspace service may be restarting or undergoing maintenance. Your account files are not affected." %}</p>
                <div class="workspace-unavailable-help">
                    <div class="d-flex align-items-center justify-content-center gap-2 fw-semibold mb-2">
                        <i data-lucide="refresh-cw"></i>
                        <span>{% translate "Try again shortly" %}</span>
                    </div>
                    <p class="small text-muted mb-4">{% translate "If Workspace remains unavailable, contact your hosting provider for assistance." %}</p>
                    <div class="d-flex flex-column flex-sm-row justify-content-center gap-2">
                        <a href="{{ request.path }}" class="btn btn-primary">
                            <i data-lucide="refresh-cw"></i>
                            <span>{% translate "Try Again" %}</span>
                        </a>
                        <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary">
                            <i data-lucide="layout-dashboard"></i>
                            <span>{% translate "Back to Dashboard" %}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}