{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Add Local Disk Pool" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Add Local Disk Pool" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Register a local or mounted filesystem as a backup destination." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a class="btn btn-outline-secondary btn-sm text-nowrap" href="{% url 'backup_pools' %}"><i data-lucide="arrow-left"></i>{% translate "Back to Storage Pools" %}</a>
        </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 "Backups" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'backup_pools' %}">{% translate "Storage Pools" %}</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 "Add Local Disk Pool" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post" class="eenos-form" data-parsley-validate>
        {% csrf_token %}
        <div class="row g-4 align-items-stretch">
            <div class="col-xl-8">
                <div class="eenos-card h-100">
                    <div class="d-flex align-items-start gap-3 mb-4">
                        <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="hard-drive"></i></span>
                        <div>
                            <div class="eenos-panel-title">{% translate "Local Storage Destination" %}</div>
                            <div class="eenos-panel-subtitle">{% translate "Give this destination a recognizable name and enter its absolute filesystem path." %}</div>
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col-12 col-lg-7">
                            <label for="name" class="form-label">{% translate "Pool name" %}</label>
                            <input class="form-control"
                                   type="text"
                                   id="name"
                                   name="name"
                                   required
                                   minlength="3"
                                   maxlength="50"
                                   autocomplete="off"
                                   placeholder="{% translate 'Primary backup disk' %}"
                                   data-parsley-required-message="{% translate 'Enter a name for this storage pool.' %}"
                                   data-parsley-minlength-message="{% translate 'The pool name must contain at least 3 characters.' %}">
                            <div class="form-text">{% translate "This name identifies the destination in schedules and restore lists." %}</div>
                        </div>
                        <div class="col-12">
                            <label for="path" class="form-label">{% translate "Storage path" %}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i data-lucide="folder"></i></span>
                                <input class="form-control font-monospace"
                                       type="text"
                                       id="path"
                                       name="path"
                                       required
                                       minlength="2"
                                       maxlength="200"
                                       pattern="^/[\w./-]{1,253}(?&lt;![./])$"
                                       autocomplete="off"
                                       placeholder="/backup"
                                       data-parsley-required-message="{% translate 'Enter the backup storage path.' %}"
                                       data-parsley-pattern-message="{% translate 'Enter an absolute path beginning with / and without a trailing slash.' %}">
                            </div>
                            <div class="form-text">{% translate "The directory must already exist and be writable by the backup service." %}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <aside class="eenos-card h-100">
                    <div class="eenos-panel-title">{% translate "Before You Add It" %}</div>
                    <div class="eenos-panel-subtitle mb-4">{% translate "Verify the destination is suitable for server backups." %}</div>
                    <div class="d-grid gap-3">
                        <div class="d-flex gap-3">
                            <i class="text-success flex-shrink-0" data-lucide="circle-check"></i>
                            <div>
                                <div class="fw-semibold small">{% translate "Mounted and available" %}</div>
                                <div class="small text-muted">{% translate "Confirm the disk or network mount is active." %}</div>
                            </div>
                        </div>
                        <div class="d-flex gap-3">
                            <i class="text-success flex-shrink-0" data-lucide="circle-check"></i>
                            <div>
                                <div class="fw-semibold small">{% translate "Writable directory" %}</div>
                                <div class="small text-muted">{% translate "Ensure the backup process can create files in this path." %}</div>
                            </div>
                        </div>
                        <div class="d-flex gap-3">
                            <i class="text-success flex-shrink-0" data-lucide="circle-check"></i>
                            <div>
                                <div class="fw-semibold small">{% translate "Enough free space" %}</div>
                                <div class="small text-muted">{% translate "Allow capacity for retention and concurrent backup jobs." %}</div>
                            </div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text">{% translate "Avoid paths located on the same disk as the accounts being backed up whenever possible." %}</div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
        <input type="hidden" name="add_pool" value="yes">
        <div class="d-flex flex-wrap gap-2 mt-4">
            <button type="submit" class="btn btn-primary" name="save" value="yes"><i data-lucide="plus"></i>{% translate "Add Disk Pool" %}</button>
            <a class="btn btn-outline-secondary" href="{% url 'backup_pools' %}">{% translate "Cancel" %}</a>
        </div>
    </form>
{% endblock %}