@extends('frame')

@section('title', 'The Dash | '. $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>
        </div>
        <section class="settings-tabs">
            <section id="site-profile" class="section-tab show">
                <div class="member-avatar">
                    <div class="avatar" style="background: url({{ $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({{ $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="{{ $member['handle'] }}" autofocus/>
                    <input type='text' class="input-dark" name='email' id='settings-email' placeholder='email' value="{{ $member['email'] }}" autofocus/>
                    <input type='hidden' name='member-id' id='member-id' value="{{ $member['id'] }}"/>
                </div>
                <div>
                    <input type='text' class="input-dark" name='base-url' id='settings-url' placeholder='url' value="{{ $baseUrl }}" autofocus/>
                    <input type='text' class="input-dark" name='base-title' id='settings-title' placeholder='site title' value="{{ $siteTitle }}" autofocus/>
                </div>
                <div>
                    <textarea id="settings-desc" class="input-dark" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ $desc }}</textarea>
                </div>
                <div>
                    <div>
                        <label>API KEY</label>
                        <span>{{ $member['key'] }}</span>
                    </div>
                    <div>
                        <label>FORM TOKEN</label><br/>
                        <span>{{ $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($apiStatus) && $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($dynamicRenderStatus) && $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-backup">
                            <span>CONTENT BACKUP</span>
                        </button>
                        <span>
                            @if($lastBackup != '')
                                LAST BACK UP
                                <a href="/api/v1/backup/download">{{ $lastBackup }}</a><br/>
                            @else
                                <span>span No back ups. Frowny face.</span>
                            @endif
                        <span>
                    </div>
                    <!-- TODO: File Back up option
                    <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>COMING SOON</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>Restores site to default state. !CANNOT UNDO!</span>
                    </div>
                </div>
            </section>
            <section id="site-themes" class="section-tab hide">
                @foreach($themes as $theme)
                    @if($theme['name'] == $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>
    </article>
@endsection
  @section('scripting')
    <script type="module" src="/assets/scripts/dash/app/EditSettings.js"></script>
  @endsection