{% extends "base.html" %}
{% set active_page = "admin_domain_template" %}
{% block title %}<title>Create Zone Template - {{ SITE_NAME }}</title>{% endblock %}

{% block dashboard_stat %}
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">
                        Create Zone Template
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.templates') }}">Templates</a></li>
                        <li class="breadcrumb-item active">Create Zone Template</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <section class="content">
        <div class="container-fluid">
            {% with errors = get_flashed_messages(category_filter=["error"]) %}
                {% if errors %}
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;
                                </button>
                                <h4>
                                    <i class="fa-solid fa-ban"></i> Error!
                                </h4>
                                <div class="alert-message block-message error">
                                    <a class="close" href="#">x</a>
                                    <ul>
                                        {%- for msg in errors %}
                                            <li>{{ msg }}</li>
                                        {% endfor -%}
                                    </ul>
                                </div>
                                <!-- /.alert-message -->
                            </div>
                            <!-- /.alert -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                {% endif %}
            {% endwith %}
            <div class="row">
                <div class="col-12 col-sm-6 col-lg-4">
                    <form role="form" method="post" action="{{ url_for('admin.create_template') }}">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                        <div class="card card-outline card-primary shadow">
                            <div class="card-header">
                                <h3 class="card-title">Zone Template Editor</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="name">Template Name</label>
                                    <input type="text" class="form-control" name="name" id="name"
                                           placeholder="Enter a valid template name (required)">
                                </div>
                                <div class="form-group">
                                    <label for="description">Template Description</label>
                                    <input type="text" class="form-control" name="description" id="description"
                                           placeholder="Enter a template description (optional)">
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="button" class="btn btn-secondary float-left" title="Cancel"
                                        onclick="window.location.href='{{ url_for('admin.templates') }}'">
                                    Cancel
                                </button>
                                <button type="submit" class="btn btn-primary float-right" title="Save Template">
                                    <i class="fa-solid fa-save"></i>&nbsp;Save Template
                                </button>
                            </div>
                            <!-- /.card-footer -->
                        </div>
                        <!-- /.card -->
                    </form>
                </div>
                <!-- /.col -->

                <div class="col-12 col-sm-6 col-lg-8">
                    <div class="card card-outline card-secondary shadow">
                        <div class="card-header">
                            <h3 class="card-title">Zone Template Editor Help</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <dl class="dl-horizontal">
                                <dt>Template Name</dt>
                                <dd>Enter your template name, this is the name of the template that
                                    will be shown to users. The name should not have any spaces but
                                    can have symbols.
                                </dd>
                                <dt>Template Description</dt>
                                <dd>Enter your template description, this is to help better
                                    identify the template.
                                </dd>
                            </dl>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
{% endblock %}

{% block extrascripts %}
    <script>
        $("input[name=radio_type]").change(function () {
            var type = $(this).val();
            if (type == "secondary") {
                $("#domain_primary_address_div").show();
            } else {
                $("#domain_primary_address_div").hide();
            }
        });
    </script>
{% endblock %}