@extends('frame') 
<?php
    $status = $settings['status'];
    $title = $settings['title'];
    $renderOnSave = $settings['renderOnSave'];
?>

@section('title', 'The Dash | '. $settings['title'])

    @section('main-content')
        <article class="settings">
            <div class="tab-toolbar" role="toolbar">
                <button id="profile" class="tab-button">PROFILE</button>
                <button id="features" class="tab-button">FEATURES</button>
                <button id="themes" class="tab-button">THEMES</button>
                <button id="menu" class="tab-button">MENU</button>
            </div>
            <section class="settings-tabs">
                <section id="site-profile" class="section-tab show">
                    <div class="member-avatar">
                        <div class="avatar" style="background: url({{$settings['member']['avatar']}} ) no-repeat center center / cover"></div>
                        <input id="avatar-upload" type="file" name="avatar-upload" />
                    </div>
                    <div class="site-background">
                        <div class="background" style="background: url({{$settings['background']}} ) no-repeat center center / cover"></div>
                        <input id="background-upload" type="file" name="backgrond-upload" />
                    </div>
                    <div>
                        <input type='text' class="input-dark" name='handle' id='settings-handle' placeholder='handle' value="{{$settings['member']['handle']}}" autofocus />
                        <input type='text' class="input-dark" name='email' id='settings-email' placeholder='email' value="{{$settings['member']['email']}}" autofocus />
                        <input type='hidden' name='member-id' id='member-id' value="{{$settings['member']['id']}}" />
                    </div>
                    <div>
                        <input type='text' class="input-dark" name='base-url' id='settings-url' placeholder='url' value="{{$settings['baseUrl']}}" autofocus />
                        <input type='text' class="input-dark" name='base-title' id='settings-title' placeholder='site title' value="{{$settings['siteTitle']}}" autofocus />
                    </div>
                    <div>
                        <textarea id="settings-desc" class="input-dark" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{$settings['desc']}}</textarea>
                    </div>
                    <div>
                        <div>
                            <label>API KEY</label>
                            <span>{{$settings['member']['key']}}</span>
                        </div>
                        <div>
                            <label>FORM TOKEN</label><br />
                            <span>{{$settings['ftoken']}}</span>
                        </div>

                    </div>
                </section>
                <section id="site-features" class="section-tab hide">
                    <div class="features-mail">
                        <button id="send-test-mail">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-mail-with-circle" />
                            </svg>
                            <span>TEST MAIL</span>
                        </button>
                        <div>
                            <label>SYSTEM EMAIL</label><br />
                            set email settings in .env file
                        </div>
                    </div>
                    <div class="site-options">
                        <div class="option-container">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline" />
                            </svg>
                            @if(isset($settings['apiStatus']) && $settings['apiStatus'] == 'true')
                                <button id="api-access-toggle" title="allow external api" data-enabled="true">
                                    <span id="api-status">API ACCESS ENABLED</span>
                                </button>
                            @else
                                <button id="api-access-toggle" title="allow external api" data-enabled="false">

                                    <span id="api-status">API ACCESS NOT ENABLED</span>
                                </button>
                            @endif
                        </div>
                        <div class="option-container">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle" />
                            </svg>
                            @if(isset($settings['dynamicRenderStatus']) && $settings['dynamicRenderStatus'] == 'true')
                                <button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
                                    <span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
                                </button>

                            @else
                                <button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
                                    <span id="dynamic-render-status">STATIC PAGE RENDERING</span>
                                </button>

                            @endif
                        </div>
                    </div>
                    <div class="site-maintenance">
                        <div class="option-container">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-copy" />
                            </svg>
                            <button id="create-content-backup">
                                <span>CONTENT BACKUP</span>
                            </button>
                            <span>
                                @if($settings['lastContentBackup'] != '')
                                    MOST RECENT:
                                    <a href="/dashboard/settings/backup/get/content-download">{{$settings['lastContentBackup']}}</a><br />
                                @else
                                    <span>span No back ups. Frowny face.</span>
                                @endif
                                <span>
                        </div>
                        <div class="option-container">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-images" />
                            </svg>
                            <button id="create-file-backup">
                                <span>FILE BACKUP</span>
                            </button>
                            <span>
                                @if($settings['lastFilesBackup'] != '')
                                    MOST RECENT:
                                    <a href="/dashboard/settings/backup/get/files-download">{{$settings['lastFilesBackup']}}</a><br />
                                @else
                                    <span>span No back ups. Frowny face.</span>
                                @endif
                            </span>
                        </div>
                        <div class="option-container">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-back-in-time" />
                            </svg>
                            <button id="reset-to-default">
                                <span>RESET TO DEFAULT</span>
                            </button>
                            <span>Deletes all content and configs <strong>CANNOT UNDO</strong></span>
                        </div>
                    </div>
                </section>
                <section id="site-themes" class="section-tab hide">
                    @foreach($settings['themes'] as $theme)
                        @if($theme['name'] == $settings['currentTheme'])
                            <!--
                        <a target="_blank" href='/theme'>Edit</a>
                        -->
                            <button id="{{$theme['name']}}" class="theme-select" data-enabled="true">
                                <div for="{{$theme['name']}}">
                                    <label id="label-{{$theme['name']}}">ACTIVE THEME</label>
                                </div>
                                <svg id="nav-menu-icon" class="icon">
                                    <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette" />
                                </svg>
                                <span for="{{$theme['name']}}">{{$theme['display-name']}}</span>
                            </button>
                        @else
                            <button id="{{$theme['name']}}" class="theme-select" data-enabled="false">
                                <div for="{{$theme['name']}}">
                                    <label id="label-{{$theme['name']}}">INACTIVE THEME</label>
                                </div>
                                <svg id="nav-menu-icon" class="icon">
                                    <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette" />
                                </svg>
                                <span for="{{$theme['name']}}">{{$theme['display-name']}}</span>
                            </button>
                        @endif
                    @endforeach
                </section>
                <section id="site-menu" class="section-tab hide">
                    @foreach($nav['menu'] as $item)
                        <div id="{{$item['id']}}" class="nav-item" data-slug="{{$item['slug']}}" data-uuid="{{$item['uuid']}}" data-path="{{$item['id']}}">
                            <svg id="move-menu-item" class="icon">
                                <use id="move-menu-item" xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows" />
                            </svg>
                            <label>@php echo urldecode($item['title']) @endphp</label>
                            <div id="nav-btns">
                                <button id="edit-item" class="nav-btn" data-uuid="{{$item['uuid']}}" data-id="{{$item['id']}}" title="edit page">
                                    <svg id="edit-item" class="icon" data-uuid="{{$item['uuid']}}" data-id="{{$item['id']}}">
                                        <use id="edit-item" data-uuid="{{$item['uuid']}}" data-id="{{$item['id']}}" xlink:href="/assets/images/global/sprite.svg#entypo-edit" />
                                    </svg>
                                </button>
                                <button id="remove-item" class="nav-btn" data-uuid="{{$item['uuid']}}" data-id="{{$item['id']}}" title="delete from menu">
                                    <svg id="remove-item" class="icon" data-uuid="{{$item['uuid']}}" data-id="{{$item['id']}}">
                                        <use id="remove-item" data-uuid="{{$item['uuid']}}" data-id="{{$item['id']}}" xlink:href="/assets/images/global/sprite.svg#entypo-cross" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    @endforeach
                </section>
            </section>
        </article>
    @endsection
    @section('scripting')
        <script type="module" src="/assets/scripts/dash/app/EditSettings.js"></script>
        <script type="module" src="/assets/scripts/dash/app/EditNav.js"></script>
    @endsection