<!-- Content -->
<div class="app-content content">
    <div class="content-overlay"></div>

    <!-- Content wrapper -->
    <div class="content-wrapper">

        <!-- Content header -->
        <div class="content-header row mb-2">
            <div class="content-header-left col-12 col-md-6 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">
                    {{ i18n._('_common.admin.super') }}
                </h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a
                                        href="{{ url('admin/dashboard') }}">{{ i18n._('_common.homepage') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('users/admin') }}">{{ i18n._('admin.menu') }}</a></li>
                            <li class="breadcrumb-item active">{{ i18n._('_common.admin.super') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Content header -->

        <!-- Content body -->
        <div class="content-body">

            <!-- Admin loader wrapper -->
            <div class="admin-loader-wrapper">
                <div class="admin-loader"></div>
                <div class="loader-caption">{{ loaderCaption }}</div>
            </div>
            <!-- /Admin loader wrapper -->

            <!-- Ajax content wrapper -->
            <section id="superadmin" class="ajax-content-wrapper" style="display:none">
                <div class="row justify-content-center">
                    <div class="col-12 col-lg-10 col-xl-8">
                        <div class="card">
                            <div class="card-content collapse show">
                                <div class="card-body px-2 px-md-3 px-xl-4">
                                    {{ form('id': 'edit-superadmin-form', 'onsubmit': 'return editSuperAdmin()', 'autocomplete': 'off') }}
                                        <div class="form-body">
                                            <div class="form-group row align-items-center">
                                                <div class="col-12 col-md-4 col-xl-3 label-control mb-1 mb-md-0">{{ i18n._('_common.username') }}</div>
                                                <div class="col-12 col-md-8 col-xl-9 value-field">
                                                    <input
                                                    type="text"
                                                    id="superadmin-username"
                                                    name="superadmin-username"
                                                    class="form-control"
                                                    value="{{ superAdminUser.username }}"
                                                    autocomplete="off"
                                                    required
                                                />
                                            </div>
                                        </div>
                                        <div class="form-group row align-items-center">
                                            <div class="col-12 col-md-4 col-xl-3 label-control mb-1 mb-md-0">{{ i18n._('_common.password') }}</div>
                                                <div class="col-12 col-md-8 col-xl-9 value-field">
                                                    <input
                                                        type="password"
                                                        id="superadmin-password"
                                                    name="superadmin-password"
                                                    class="form-control"
                                                    value=""
                                                    autocomplete="new-password"
                                                    required
                                                />
                                            </div>
                                        </div>
                                        <div class="form-group row align-items-center">
                                            <div class="col-12 col-md-4 col-xl-3 label-control mb-1 mb-md-0">{{ i18n._('_common.password.repeat') }}</div>
                                            <div class="col-12 col-md-8 col-xl-9 value-field">
                                                <input
                                                    type="password"
                                                    id="superadmin-repeat-password"
                                                    name="superadmin-repeat-password"
                                                    class="form-control"
                                                    value=""
                                                    autocomplete="new-password"
                                                    required
                                                />
                                            </div>
                                        </div>
                                    </div>

                                        <div class="text-right mt-2">
                                            <button type="submit" class="btn btn-outline-primary">
                                                {{ i18n._('_common.save') }}
                                            </button>
                                        </div>
                                    </form>

                                    <div class="modal-result-wrapper mt-2">
                                        <div class="alert alert-danger" id="superadmin-error" role="alert"></div>
                                        <div class="alert alert-success" id="superadmin-success" role="alert"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- /Ajax content wrapper -->

        </div>
        <!-- /Content body -->

    </div>
    <!-- /Content wrapper -->

</div>
<!-- /Content -->
