{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Feature Not Available" %} - Eenos{% endblock %}
{% block extra_css %}
<style>
.feature-unavailable-card{max-width:680px;margin-inline:auto;padding:clamp(1.5rem,4vw,3rem);text-align:center;border-top:3px solid var(--eenos-primary)}
.feature-unavailable-icon{width:76px;height:76px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--eenos-primary-light);color:var(--eenos-primary)}
.feature-unavailable-icon svg{width:34px;height:34px;stroke-width:1.8}
.feature-unavailable-label{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.35rem .7rem;border:1px solid var(--eenos-border);border-radius:999px;color:var(--eenos-text-secondary);font-size:.75rem;font-weight:600}
.feature-unavailable-help{max-width:500px;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 "Feature Not Available" %}</h1>
        <div class="eenos-page-subtitle">{% translate "This feature is not enabled for your hosting account." %}</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 class="eenos-breadcrumb-current" aria-current="page">{% translate "Feature Not Available" %}</span>
</nav>
<div class="row justify-content-center">
    <div class="col-12">
        <div class="eenos-card feature-unavailable-card">
            <div class="feature-unavailable-icon" aria-hidden="true"><i data-lucide="lock-keyhole"></i></div>
            <div class="feature-unavailable-label"><i data-lucide="circle-minus"></i>{% translate "Not included in your plan" %}</div>
            <h2 class="h4 mb-3">{% translate "This feature is currently unavailable" %}</h2>
            <p class="text-muted mb-0">{% translate "Your hosting account does not currently include access to this feature. All other services included in your plan remain available." %}</p>
            <div class="feature-unavailable-help">
                <div class="d-flex align-items-center justify-content-center gap-2 fw-semibold mb-2"><i data-lucide="messages-square"></i><span>{% translate "Need this feature?" %}</span></div>
                <p class="small text-muted mb-4">{% translate "Contact your hosting provider to ask whether it can be enabled or added to your hosting plan." %}</p>
                <a href="{% url 'dashboard' %}" class="btn btn-primary d-inline-flex align-items-center justify-content-center gap-2">
                    <i data-lucide="arrow-left"></i><span>{% translate "Back to Dashboard" %}</span>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}