@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="member-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' name='handle' id='settings-handle' placeholder='handle' value="{{ $member['handle'] }}" autofocus/>
                    <input type='text' 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' name='base-url' id='settings-url' placeholder='url' value="{{ $baseUrl }}" autofocus/>
                    <input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ $siteTitle }}" autofocus/>
                </div>
                <div>
                    <textarea id="settings-desc" 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="member-features" class="section-tab hide">
                MEMBER FEATURES
                <div class="features">
                    @if(isset($apiStatus) && $apiStatus == 'true')
                        <button id="api-access-toggle" title="allow external api" data-enabled="true">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
                            </svg>
                            <span id="api-status">API ACCESS ENABLED</span>
                        </button>
                    @else
                        <button id="api-access-toggle" title="allow external api" data-enabled="false">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
                            </svg>
                            <span id="api-status">API ACCESS NOT ENABLED</span>
                        </button>

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

                    @else
                        <button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
                            <svg id="nav-menu-icon" class="icon">
                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cycle"/>
                            </svg>
                            <span id="dynamic-render-status">STATIC PAGE RENDERING</span>
                        </button>

                    @endif
                </div>
                <div>
                    <button id="create-backup">
                        <svg id="nav-menu-icon" class="icon">
                            <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-back-in-time"/>
                        </svg>
                        <span>CREATE BACKUP</span>
                    </button><br/>
                    @if($lastBackup != '')
                        LAST BACK UP<br/>
                        <a href="/api/v1/backup/download">{{ $lastBackup }}</a><br/>
                    @else
                        <span>span No back ups. Frowny face.</span>
                    @endif
                </div>
                <div class="mail">
                    <label>Email</label><br/>
                    @if($mailOption == "option-none" or $mailOption == "")
                        <a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
                    @else
                        <a href="#" class="mail-option" id="option-none" data-enabled="false">NONE</a>
                    @endif
                    @if($mailOption == "option-mg" or $mailOption == "")
                        <a href="#" class="mail-option" id="option-mg" data-enabled="true">MAILGUN</a>
                    @else
                        <a href="#" class="mail-option" id="option-mg" data-enabled="false">MAILGUN</a>
                    @endif
                    @if($mailOption == "option-smtp" or $mailOption == "")
                        <a href="#" class="mail-option" id="option-smtp" data-enabled="true">SMTP</a>
                    @else
                        <a href="#" class="mail-option" id="option-smtp" data-enabled="false">SMTP</a>
                    @endif
                    @include('forms.mailforms')
                    <button id="send-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>
            </section>
            <section id="member-themes" class="section-tab hide">
                MEMBER THEMES
                <div class="theme">
                    <label>Themes</label><br/>
                    @foreach($themes as $theme)
                        @if($theme['name'] == $currentTheme)
                            <button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
                                <svg id="nav-menu-icon" class="icon">
                                    <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
                                </svg>
                                <span>{{ $theme['display-name'] }}</span>
                            </button><a target="_blank" href='/theme'>Edit</a>
                        @else
                            <button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
                                <svg id="nav-menu-icon" class="icon">
                                    <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
                                </svg>
                                <span>{{ $theme['display-name'] }}</span>
                            </button>
                        @endif
                    @endforeach
                </div>
            </section>
        </section>
    </article>
@endsection
  @section('scripting')
    <script type="module" src="/assets/scripts/dash/app/EditSettings.js"></script>
  @endsection