{{define "title"}}Statping | Settings{{end}}
{{define "content"}}
<div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
{{template "nav"}}
    <div class="col-12">
        <div class="row">
            <div class="col-md-3 col-sm-12 mb-4 mb-md-0">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-cogs"></i> Settings</a>
                    <a class="nav-link" id="v-pills-style-tab" data-toggle="pill" href="#v-pills-style" role="tab" aria-controls="v-pills-style" aria-selected="false"><i class="fa fa-image"></i> Theme Editor</a>
                {{ range .Notifications }}
                    <a class="nav-link text-capitalize" id="v-pills-{{underscore .Select.Method}}-tab" data-toggle="pill" href="#v-pills-{{underscore .Select.Method}}" role="tab" aria-controls="v-pills-{{underscore .Select.Method}}" aria-selected="false"><i class="{{.Select.Icon}}"></i> {{.Select.Method}}</a>
                {{ end }}
                    <a class="nav-link d-none" id="v-pills-backups-tab" data-toggle="pill" href="#v-pills-backups" role="tab" aria-controls="v-pills-backups" aria-selected="false">Backups</a>
                {{ range .Plugins }}
                    <a class="nav-link text-capitalize" id="v-pills-{{underscore .Name}}-tab" data-toggle="pill" href="#v-pills-{{underscore .Name}}" role="tab" aria-controls="v-pills-profile" aria-selected="false">{{.Name}}</a>
                {{end}}
                </div>
            </div>
            <div class="col-md-9 col-sm-12">
            {{if Error}}
                <div class="alert alert-danger" role="alert">{{Error}}</div>
            {{end}}
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h3>Settings</h3>

                        <form method="POST" action="/settings">
                            <div class="form-group">
                                <label for="project">Project Name</label>
                                <input type="text" name="project" class="form-control" value="{{ .Name }}" id="project" placeholder="Great Uptime">
                            </div>

                            <div class="form-group">
                                <label for="description">Project Description</label>
                                <input type="text" name="description" class="form-control" value="{{ .Description }}" id="description" placeholder="Great Uptime">
                            </div>

                            <div class="form-group row">
                                <div class="col-8 col-sm-9">
                                    <label for="domain">Domain</label>
                                    <input type="url" name="domain" class="form-control" value="{{ .Domain }}" id="domain">
                                </div>
                                <div class="col-4 col-sm-3 mt-sm-1 mt-0">
                                    <label for="enable_cdn" class="d-inline d-sm-none">Enable CDN</label>
                                    <label for="enable_cdn" class="d-none d-sm-block">Enable CDN</label>
                                    <span class="switch">
                                        <input type="checkbox" name="enable_cdn-option" class="switch" id="switch-normal" {{if USE_CDN}}checked{{end}}{{if .UsingAssets}} disabled{{end}}>
                                        <label for="switch-normal" class="mt-2 mt-sm-0"></label>
                                    </span>
                                    <input type="hidden" name="enable_cdn" id="switch-normal-value" value="{{if USE_CDN}}true{{else}}false{{end}}">
                                </div>
                            </div>

                            {{if not .Domain}}
                                <div class="alert alert-danger" role="alert">
                                    Your Statup server does not have a dedicated URL!
                                </div>
                            {{end}}

                            <div class="form-group">
                                <label for="footer">Custom Footer</label>
                                <textarea rows="4" name="footer" class="form-control" id="footer">{{ .Footer.String }}</textarea>
                                <small class="form-text text-muted">HTML is allowed inside the footer</small>
                            </div>

                            <div class="form-group">
                                <label for="timezone">Timezone</label><span class="mt-1 small float-right">Current: {{.CurrentTime}}</span>
                                <select class="form-control" name="timezone" id="timezone">
                                    <option value="-12.0" {{if eq (ToString .Timezone) "-12.000000"}}selected{{end}}>(GMT -12:00) Eniwetok, Kwajalein</option>
                                    <option value="-11.0" {{if eq (ToString .Timezone) "-11.000000"}}selected{{end}}>(GMT -11:00) Midway Island, Samoa</option>
                                    <option value="-10.0" {{if eq (ToString .Timezone) "-10.000000"}}selected{{end}}>(GMT -10:00) Hawaii</option>
                                    <option value="-9.0" {{if eq (ToString .Timezone) "-9.000000"}}selected{{end}}>(GMT -9:00) Alaska</option>
                                    <option value="-8.0" {{if eq (ToString .Timezone) "-8.000000"}}selected{{end}}>(GMT -8:00) Pacific Time (US &amp; Canada)</option>
                                    <option value="-7.0" {{if eq (ToString .Timezone) "-7.000000"}}selected{{end}}>(GMT -7:00) Mountain Time (US &amp; Canada)</option>
                                    <option value="-6.0" {{if eq (ToString .Timezone) "-6.000000"}}selected{{end}}>(GMT -6:00) Central Time (US &amp; Canada), Mexico City</option>
                                    <option value="-5.0" {{if eq (ToString .Timezone) "-5.000000"}}selected{{end}}>(GMT -5:00) Eastern Time (US &amp; Canada), Bogota, Lima</option>
                                    <option value="-4.0" {{if eq (ToString .Timezone) "-4.000000"}}selected{{end}}>(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
                                    <option value="-3.5" {{if eq (ToString .Timezone) "-3.500000"}}selected{{end}}>(GMT -3:30) Newfoundland</option>
                                    <option value="-3.0" {{if eq (ToString .Timezone) "-3.000000"}}selected{{end}}>(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
                                    <option value="-2.0" {{if eq (ToString .Timezone) "-2.000000"}}selected{{end}}>(GMT -2:00) Mid-Atlantic</option>
                                    <option value="-1.0" {{if eq (ToString .Timezone) "-1.000000"}}selected{{end}}>(GMT -1:00 hour) Azores, Cape Verde Islands</option>
                                    <option value="0.0" {{if eq (ToString .Timezone) "0.000000"}}selected{{end}}>(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
                                    <option value="1.0" {{if eq (ToString .Timezone) "1.000000"}}selected{{end}}>(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
                                    <option value="2.0" {{if eq (ToString .Timezone) "2.000000"}}selected{{end}}>(GMT +2:00) Kaliningrad, South Africa</option>
                                    <option value="3.0" {{if eq (ToString .Timezone) "3.000000"}}selected{{end}}>(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
                                    <option value="3.5" {{if eq (ToString .Timezone) "3.500000"}}selected{{end}}>(GMT +3:30) Tehran</option>
                                    <option value="4.0" {{if eq (ToString .Timezone) "4.000000"}}selected{{end}}>(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
                                    <option value="4.5" {{if eq (ToString .Timezone) "4.500000"}}selected{{end}}>(GMT +4:30) Kabul</option>
                                    <option value="5.0" {{if eq (ToString .Timezone) "5.000000"}}selected{{end}}>(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
                                    <option value="5.5" {{if eq (ToString .Timezone) "5.500000"}}selected{{end}}>(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
                                    <option value="5.75" {{if eq (ToString .Timezone) "5.750000"}}selected{{end}}>(GMT +5:45) Kathmandu</option>
                                    <option value="6.0" {{if eq (ToString .Timezone) "6.000000"}}selected{{end}}>(GMT +6:00) Almaty, Dhaka, Colombo</option>
                                    <option value="7.0" {{if eq (ToString .Timezone) "7.000000"}}selected{{end}}>(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
                                    <option value="8.0" {{if eq (ToString .Timezone) "8.000000"}}selected{{end}}>(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
                                    <option value="9.0" {{if eq (ToString .Timezone) "9.000000"}}selected{{end}}>(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
                                    <option value="9.5" {{if eq (ToString .Timezone) "9.500000"}}selected{{end}}>(GMT +9:30) Adelaide, Darwin</option>
                                    <option value="10.0" {{if eq (ToString .Timezone) "10.500000"}}selected{{end}}>(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
                                    <option value="11.0" {{if eq (ToString .Timezone) "11.000000"}}selected{{end}}>(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
                                    <option value="12.0" {{if eq (ToString .Timezone) "12.000000"}}selected{{end}}>(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
                                </select>
                            </div>

                            <button type="submit" class="btn btn-primary btn-block">Save Settings</button>

                            <div class="form-group row mt-3">
                                <label for="api_key" class="col-sm-3 col-form-label">API Key</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control select-input" value="{{ .ApiKey }}" id="api_key" readonly>
                                    <small class="form-text text-muted">API Key can be used for read only routes</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="api_secret" class="col-sm-3 col-form-label">API Secret</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control select-input" value="{{ .ApiSecret }}" id="api_secret" readonly>
                                    <small class="form-text text-muted">API Secret is used for read, create, update and delete routes</small>
                                    <small class="form-text text-muted">You can <a class="confirm_btn" data-msg="Are you sure you want to reset the API keys?" href="/api/renew">Regenerate API Keys</a> if you need to.</small>
                                </div>
                            </div>

                        </form>

                        <h3>Additional Settings</h3>

                        <div class="row">
                            <a href="/api/clear_cache" class="btn btn-sm btn-secondary float-right">Clear Cache</a>
                             <a href="/settings/export" class="btn btn-sm btn-secondary float-right">Export Settings</a>
                            {{if .Domain}}
                                <a href="#" class="btn btn-sm btn-secondary float-right ml-1">Authentication QR Code</a>
                            {{end}}
                        </div>

                        {{if .Domain}}
                            <div class="row align-content-center">
                                <img class="rounded text-center" width="300" height="300" src="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl={{ QrAuth }}">
                            </div>
                            <a class="btn btn-sm btn-primary" href={{safeURL QrAuth}}>Open in Statping App</a>
                        {{end}}

                    </div>

                    <div class="tab-pane" id="v-pills-style" role="tabpanel" aria-labelledby="v-pills-style-tab">

                    {{if not .UsingAssets }}
                        <div class="jumbotron jumbotron-fluid">
                            <div class="text-center col-12">
                                <h1 class="display-5">Enable Local Assets</h1>
                                <span class="lead">Customize your status page design by enabling local assets. This will create a 'assets' directory containing all CSS.<p><a href="/settings/build" class="btn btn-primary mt-3"{{if USE_CDN}} disabled{{end}}>Enable Local Assets</a></p></span>
                            </div>
                        </div>
                    {{ else }}
                        <form method="POST" action="/settings/css">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item col text-center">
                                    <a class="nav-link active" id="pills-vars-tab" data-toggle="pill" href="#pills-vars" role="tab" aria-controls="pills-vars" aria-selected="true">Variables</a>
                                </li>
                                <li class="nav-item col text-center">
                                    <a class="nav-link" id="pills-theme-tab" data-toggle="pill" href="#pills-theme" role="tab" aria-controls="pills-theme" aria-selected="false">Base Theme</a>
                                </li>
                                <li class="nav-item col text-center">
                                    <a class="nav-link" id="pills-mobile-tab" data-toggle="pill" href="#pills-mobile" role="tab" aria-controls="pills-mobile" aria-selected="false">Mobile</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane show active" id="pills-vars" role="tabpanel" aria-labelledby="pills-vars-tab">
                                    <textarea name="variables" id="sass_vars">{{ .SassVars }}</textarea>
                                </div>
                                <div class="tab-pane" id="pills-theme" role="tabpanel" aria-labelledby="pills-theme-tab">
                                    <textarea name="theme" id="theme_css">{{ .BaseSASS }}</textarea>
                                </div>
                                <div class="tab-pane" id="pills-mobile" role="tabpanel" aria-labelledby="pills-mobile-tab">
                                    <textarea name="mobile" id="mobile_css">{{ .MobileSASS }}</textarea>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block mt-2">Save Style</button>
                            <a href="/settings/delete_assets" class="btn btn-danger btn-block confirm-btn">Delete All Assets</a>
                        </form>
                    {{end}}
                    </div>

                {{ range .Notifications }}
                {{$n := .Select}}
                    <div class="tab-pane fade" id="v-pills-{{underscore $n.Method}}" role="tabpanel" aria-labelledby="v-pills-{{underscore $n.Method }}-tab">

                    {{template "form_notifier" .}}

                    {{ if $n.Logs }}
                        Sent {{$n.SentLastHour}} in the last hour<br>
                    {{ range $n.Logs }}
                        <div class="card mt-1">
                            <div class="card-body">
                            {{.Message}}
                                <p class="card-text"><small class="text-muted">Sent {{.Time.Ago}}</small></p>
                            </div>
                        </div>
                    {{ end }}
                    {{ end }}
                    </div>
                {{ end }}

                    <div class="tab-pane fade" id="v-pills-browse" role="tabpanel" aria-labelledby="v-pills-browse-tab">
                    {{ range .Repos }}
                        <div class="card col-6" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">{{ .Name }}</h5>
                                <p class="card-text">{{ .Description }}</p>
                                <a href="/plugins/download/{{ .Name }}" class="card-link">Add</a>
                            </div>
                        </div>
                    {{ end }}
                    </div>


                    <div class="tab-pane fade" id="v-pills-backups" role="tabpanel" aria-labelledby="v-pills-backups-tab">
                        <a href="/backups/create" class="btn btn-primary btn-block">Backup Database</a>
                    </div>

                {{ range .Plugins }}

                    <div class="tab-pane fade" id="v-pills-{{underscore .Name}}" role="tabpanel" aria-labelledby="v-pills-{{underscore .Name}}-tab">

                        <h4 class="text-capitalize">{{ .Name }}</h4>
                        <span class="text-muted">{{ .Description }}</span>

                        <div class="mt-1">
                        {{ safe .Form }}
                        </div>

                    </div>
                {{end}}

                </div>
            </div>

        </div>
    </div>
</div>
{{end}}
{{define "extra_css"}}
<link rel="stylesheet" href="https://assets.statping.com/codemirror.css">
<link rel="stylesheet" href="https://assets.statping.com/codemirror-colorpicker.css"/>
{{end}}
{{define "extra_scripts"}}
<script src="https://assets.statping.com/codemirror.js"></script>
<script src="https://assets.statping.com/css.js"></script>
<script src="https://assets.statping.com/codemirror-colorpicker.min.js"></script>
{{end}}