{% extends "base.html" %}
{% block title %}Telerising API{% endblock %}
{% block content %}

<!-- Title -->
<p id="title" class="text-center fs-1">Your setup</p>


<!-- Status Cards -->
{% for item in accounts.keys() %}

<div class="provider card design" hidden>

    <div id="{{item}}-card-header" class="card-header text-white" style="background-color: #00aa00;">
        <a id="{{item}}-link" class="stretched-link card-link" href="#"></a>
        <div class="input-group">
            <svg class="bi bi-bookmark-star" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto; margin-right: 10px;" viewBox="0 0 16 16">
              <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
              <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
            </svg>
            <p id="{{item}}-header" style="margin-bottom: 0px;">
                {{info[item]['name']}}
            </p>
        </div>

    </div>

    <div id="{{item}}-body" class="card-body">

        <div class="input-group btn-group" style="margin-top: 10px;">
            <button id="{{item}}-sts" type="button" class="button btn btn-block btn-dark">Information</button>
            <button id="{{item}}-file" type="button" class="button btn btn-block btn-outline-dark">M3U Playlists</button>
            <button id="{{item}}-settings" type="button" class="button btn btn-block btn-outline-dark">Settings</button>
        </div>

        <div id="{{item}}-card-status" class="card-status">
            <div class="input-group">
                <h3 style="margin-top: 18px; font-weight: 3px;">
                    Status: <span id="{{item}}-status" style="color: #00aa00;">OK</span>
                </h3>
            </div>

            <h6 style="margin-top: 12px; font-weight: 3px;">Account information</h6>

            {% if accounts[item]['no_auth'] == False %}
            <div class="input-group">
                <svg class="bi bi-box-arrow-in-right" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto; margin-right: 10px;" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z"/>
                  <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
                </svg>
                <p id="{{item}}-login" style="margin-bottom: 0px;">
                    Login: {{accounts[item]['login']}}
                </p>
            </div>
            {% endif %}

            <div class="input-group">
                <svg class="bi bi-bag-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto; margin-right: 10px;" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                  <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
                </svg>
                <p id="{{item}}-account" style="margin-bottom: 0px;">
                    Account type: <span id="{{item}}-account-text">{{availability[item]['info']['type']}}</span>
                </p>
            </div>

            <h6 id="{{item}}-features" style="margin-top: 20px; font-weight: 3px;">Available features</h6>

            <div id="{{item}}-live" class="input-group" hidden>
                <svg class="bi bi-tv" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto; margin-right: 10px;" viewBox="0 0 16 16">
                  <path d="M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zM13.991 3l.024.001a1.46 1.46 0 0 1 .538.143.757.757 0 0 1 .302.254c.067.1.145.277.145.602v5.991l-.001.024a1.464 1.464 0 0 1-.143.538.758.758 0 0 1-.254.302c-.1.067-.277.145-.602.145H2.009l-.024-.001a1.464 1.464 0 0 1-.538-.143.758.758 0 0 1-.302-.254C1.078 10.502 1 10.325 1 10V4.009l.001-.024a1.46 1.46 0 0 1 .143-.538.758.758 0 0 1 .254-.302C1.498 3.078 1.675 3 2 3h11.991zM14 2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h12c2 0 2-2 2-2V4c0-2-2-2-2-2z"/>
                </svg>
                <p id="{{item}}-live-text" style="margin-bottom: 0px;">
                    Live TV{% if availability[item]['availability']['live_mode'] == 'pvr' %} (via PVR){% endif %}
                </p>
            </div>

            <div id="{{item}}-pvr" class="input-group" hidden>
                <svg class="bi bi-play-circle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto; margin-right: 10px;" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                  <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
                </svg>
                <p style="margin-bottom: 0px;">
                    Recordings
                </p>
            </div>

            <div id="{{item}}-vod" class="input-group" hidden>
                <svg class="bi bi-film" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto; margin-right: 10px;" viewBox="0 0 16 16">
                  <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
                </svg>
                <p style="margin-bottom: 0px;">
                    Video on Demand
                </p>
            </div>

            <div id="{{item}}-message" class="input-group" style="margin-top: 10px;" hidden>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                </svg>
                <p id="{{item}}-message-text" style="margin-left: 10px; margin-bottom: 0px;">
                    MESSAGE
                </p>
            </div>

            <div class="d-grid gap-2" style="margin-top: 20px;">
                <button id="{{item}}-update" type="button" class="btn btn-primary float-right">Update session</button>
            </div>
        </div>

        <!-- LIVE TV PLAYLIST -->
        <div id="{{item}}-card-files" class="card-files">
            <p style="margin-top: 5px; margin-bottom: 10px">Setup your M3U playlist and copy/paste its URL.</p>
                <input style="margin-bottom: 10px;" type="radio" id="{{item}}-m3u-live" checked>
                <label style="margin-bottom: 10px; margin-right: 10px;" for="{{item}}-m3u-live">Live TV</label>
                <input style="margin-bottom: 10px;" type="radio" id="{{item}}-m3u-pvr" value="Recordings">
                <label style="margin-bottom: 10px;" for="{{item}}-m3u-pvr">Recordings</label>

            <div class="input-group">
                <input id="{{item}}-playlist" type="text" class="form-control" disabled>
                <button id="{{item}}-playlist-copy" type="button" class="btn btn-block btn-primary">Copy</button>
            </div>
            <div style="margin-top: 10px;">
                <input class="form-check-input" type="checkbox" id="{{item}}-enable-favorites">
                <label class="form-check-label" for="{{item}}-enable-favorites">Retrieve favorite channels only</label>
            </div>
            <div>
                <input class="form-check-input" type="checkbox" id="{{item}}-enable-pipe">
                <label class="form-check-label" for="{{item}}-enable-pipe">Retrieve streams via ffmpeg pipe</label>
            </div>
        </div>

        <!-- PROVIDER SETTINGS -->
        <div id="{{item}}-card-settings" class="card-settings">

            <div class="input-group btn-group" style="margin-top: 10px;">
                <button id="{{item}}-manifest" type="button" class="button btn btn-block btn-secondary">Manifest</button>
                <button id="{{item}}-advanced" type="button" class="button btn btn-block btn-outline-secondary">Advanced</button>
                <button id="{{item}}-account-info" type="button" class="button btn btn-block btn-outline-secondary">Account</button>
            </div>

            <!-- ACCOUNT INFO -->
            <div id="{{item}}-card-settings-account-info" class="card-settings">
                <p style="margin-top: 10px; margin-bottom: 10px">Please manage your account settings and information.</p>

                {% if not accounts[item]['no_auth'] and accounts[item]['refresh_token'] %}
                <!-- REQUEST/ENTER REFRESH TOKEN -->
                <div class="input-group">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z"/>
                      <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Session
                    </p>
                    <input id="{{item}}-auth-code-input" type="text" class="form-control" placeholder="Enter verification code..." disabled>
                    <button value="{{accounts[item]['login']}}" id="{{item}}-auth-code-request" type="button" class="btn btn-success float-right">Get code</button>
                    <button id="{{item}}-submit-code" type="button" class="btn btn-primary float-right" hidden>Update</button>
                </div>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Update your account token to keep the access to your streams.</p>
                {% endif %}

                {% if not accounts[item]['no_auth'] and not accounts[item]['refresh_token'] %}
                <!-- ENTER CREDENTIALS-->
                <div class="input-group">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z"/>
                      <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Account password
                    </p>
                    <input id="{{item}}-pw-input" type="password" class="form-control" value="{{accounts[item]['pw']}}">
                    <button id="{{item}}-submit-credentials" type="button" class="btn btn-primary float-right">Update</button>
                </div>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Update your account password to keep the access to your streams.</p>

                {% if info[item]["pin_required"] %}
                <!-- YOUTH PROTECTION PIN -->
                <div class="input-group" style="margin-top: 5px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-person-check-fill" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                      <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Youth protection PIN
                    </p>
                    {% if accounts[item]['yp_code'] != "" %}
                    <input id="{{item}}-pin-input" type="password" class="form-control" maxlength="4" placeholder="(none)" value="{{accounts[item]['yp_code']}}">
                    {% else %}
                    <input id="{{item}}-pin-input" type="password" class="form-control" maxlength="4" placeholder="(none)">
                    {% endif %}
                    <button id="{{item}}-update-pin" type="button" class="btn btn-primary">Update</button>
                </div>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Please enter the youth protection PIN received by the provider to access restricted contents.</p>
                {% endif %}
                {% endif %}

                <!-- DELETE -->
                <div class="input-group">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
                      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Remove provider setup from API
                    </p>
                </div>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Delete the provider instance permanently. This process cannot be made undone! Click the button 5x to continue.</p>
                <div class="d-grid gap-2" style="margin-top: 10px;">
                    <button id="{{item}}-submit-delete-form" type="button" class="btn btn-danger float-right">Remove provider</button>
                </div>

                <div id="{{item}}-account-message" class="input-group" style="margin-top: 3px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                    </svg>
                    <p id="{{item}}-account-message-text" style="margin-left: 10px; margin-bottom: 0px;">
                        MESSAGE
                    </p>
                </div>

            </div>

            <!-- ADVANCED PROVIDER SETTINGS -->
            <div id="{{item}}-card-settings-advanced" class="card-settings">
                <p style="margin-top: 10px; margin-bottom: 10px">Please select the additional parameters to be considered by your API server.</p>

                <!-- ZATTOO SERVER -->
                {% if info[item]["server_selectable"] %}
                <div class="input-group">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-server" viewBox="0 0 16 16">
                      <path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4V2.667z"/>
                      <path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334c-.43.32-.931.58-1.458.79C11.81 7.684 9.967 8 8 8c-1.967 0-3.81-.317-5.21-.876a6.508 6.508 0 0 1-1.457-.79z"/>
                      <path d="M14.667 11.668c-.43.319-.931.578-1.458.789-1.4.56-3.242.876-5.209.876-1.967 0-3.81-.316-5.21-.876a6.51 6.51 0 0 1-1.457-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Zattoo Server
                    </p>
                    <select id="{{item}}-server-selection" class="form-select" style="margin: auto;">
                        {% if accounts[item]['server'] == "AUTO" %}
                        <option id="auto" value="auto" selected>AUTO</option>
                        {% else %}
                        <option id="auto" value="auto">AUTO</option>
                        {% endif %}
                        {% for i in servers %}
                        {% if i == accounts[item]['server'] %}
                        <option id="{{i}}" value="{{i}}" selected>{{i}}</option>
                        {% else %}
                        <option id="{{i}}" value="{{i}}">{{i}}</option>
                        {% endif %}
                        {% endfor %}
                    </select>
                    <button id="{{item}}-update-server" type="button" class="btn btn-primary">Update</button>
                </div>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Choose a specific TV server for streaming.</p>
                {% endif %}

                <!-- API SERVER CODE -->
                <div class="input-group" style="margin-top: 5px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-key" viewBox="0 0 16 16">
                      <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
                      <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        API protection code
                    </p>
                    {% if accounts[item]['api_code'] != "" %}
                    <input id="{{item}}-code-input" type="text" class="form-control" placeholder="(none)" value="{{accounts[item]['api_code']}}">
                    {% else %}
                    <input id="{{item}}-code-input" type="text" class="form-control" placeholder="(none)">
                    {% endif %}
                    <button id="{{item}}-update-code" type="button" class="btn btn-primary">Update</button>
                </div>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Protect the access to the API by using an additional code as query string in URL.</p>

                <!-- CHANNEL NUMBER -->
                <div class="input-group" style="margin-top: 5px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-arrow-up-left-circle" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.904 2.803a.5.5 0 1 0 .707-.707L6.707 6h2.768a.5.5 0 1 0 0-1H5.5a.5.5 0 0 0-.5.5v3.975a.5.5 0 0 0 1 0V6.707l4.096 4.096z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Initial channel number
                    </p>
                    {% if accounts[item]['chnum_start'] != "" %}
                    <input id="{{item}}-number-input" type="number" class="form-control" placeholder="1" value="{{accounts[item]['chnum_start']}}">
                    {% else %}
                    <input id="{{item}}-number-input" type="number" class="form-control" placeholder="1">
                    {% endif %}
                    <button id="{{item}}-update-number" type="button" class="btn btn-primary">Update</button>
                </div>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Select the first channel number to be used in your playlist.</p>

                <div id="{{item}}-advanced-message" class="input-group" style="margin-top: 10px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                    </svg>
                    <p id="{{item}}-advanced-message-text" style="margin-left: 10px; margin-bottom: 0px;">
                        MESSAGE
                    </p>
                </div>

            </div>

            <!-- MANIFEST SETTINGS -->
            <div id="{{item}}-card-settings-manifest">
                <p style="margin-top: 10px; margin-bottom: 10px">Please choose the default settings your API server should use to provide the streams.</p>
                <p style="margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">*The availability of video/audio profiles depends on your subscription and the selected manifest type.</p>
                <div class="input-group">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-file-code" viewBox="0 0 16 16">
                      <path d="M6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zm2.708 0a.5.5 0 1 0-.708.708L10.293 8 8.646 9.646a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2z"/>
                      <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Manifest type
                    </p>
                    <select id="{{item}}-manifest-selection" class="form-select" style="margin: auto;">
                        {% if accounts[item]['manifest_type'] == 'hls5' %}
                        <option id="hls5" value="hls5" selected>HLS5</option>
                        {% elif not info[item]['manifest_types']['hls5'] %}
                        <option id="hls5" value="hls5" disabled>HLS5 (unavailable)</option>
                        {% else %}
                        <option id="hls5" value="hls5">HLS5</option>
                        {% endif %}
                        {% if accounts[item]['manifest_type'] == 'hls7' %}
                        <option id="hls7" value="hls7" selected>HLS7</option>
                        {% elif not info[item]['manifest_types']['hls7'] %}
                        <option id="hls7" value="hls7" disabled>HLS7 (unavailable)</option>
                        {% else %}
                        <option id="hls7" value="hls7">HLS7</option>
                        {% endif %}
                    </select>
                </div>
                <div class="input-group" style="margin-top: 5px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-broadcast-pin" viewBox="0 0 16 16">
                      <path d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 0 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Max. Quality
                    </p>
                    <select id="{{item}}-bw-selection" class="form-select" style="margin: auto;">
                        {% if "21000" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '21000' %}
                        <option id="21000" value="21000" selected>2160p50</option>
                        {% else %}
                        <option id="21000" value="21000">2160p50</option>
                        {% endif %}
                        {% endif %}
                        {% if "8000" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '8000' %}
                        <option id="8000" value="8000" selected>1080p50</option>
                        {% else %}
                        <option id="8000" value="8000">1080p50</option>
                        {% endif %}
                        {% endif %}
                        {% if "4999" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '4999' %}
                        <option id="4999" value="4999" selected>1080p25</option>
                        {% else %}
                        <option id="4999" value="4999">1080p25</option>
                        {% endif %}
                        {% endif %}
                        {% if "5000" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '5000' %}
                        <option id="5000" value="5000" selected>720p50</option>
                        {% else %}
                        <option id="5000" value="5000">720p50</option>
                        {% endif %}
                        {% endif %}
                        {% if "3000" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '3000' %}
                        <option id="3000" value="3000" selected>720p25</option>
                        {% else %}
                        <option id="3000" value="3000">720p25</option>
                        {% endif %}
                        {% endif %}
                        {% if "2999" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '2999' %}
                        <option id="2999" value="2999" selected>576p50</option>
                        {% else %}
                        <option id="2999" value="2999">576p50</option>
                        {% endif %}
                        {% endif %}
                        {% if "2000" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '2000' %}
                        <option id="2000" value="2000" selected>576p25</option>
                        {% else %}
                        <option id="2000" value="2000">576p25</option>
                        {% endif %}
                        {% endif %}
                        {% if "1500" in info[item]["available_qualities"] %}
                        {% if accounts[item]['bw'] == '1500' %}
                        <option id="1500" value="1500" selected>432p25</option>
                        {% else %}
                        <option id="1500" value="1500">432p25</option>
                        {% endif %}
                        {% endif %}
                    </select>
                </div>
                <div class="input-group" style="margin-top: 5px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-music-note" viewBox="0 0 16 16">
                      <path d="M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2z"/>
                      <path fill-rule="evenodd" d="M9 3v10H8V3h1z"/>
                      <path d="M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5V2.82z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Audio 1*
                    </p>
                    <select id="{{item}}-A1" class="form-select {{item}}-audio" style="margin: auto;">
                        {% if accounts[item]['audio1'] == 'aac1' %}
                        <option id="{{item}}-A1Stereo1" value="aac1" selected>AAC Stereo (original)</option>
                        {% else %}
                        <option id="{{item}}-A1Stereo1" value="aac1">AAC Stereo (original)</option>
                        {% endif %}
                        {% if accounts[item]['audio1'] == 'aac2' %}
                        <option id="{{item}}-A1Stereo2" value="aac2" selected>AAC Stereo (foreign/misc)</option>
                        {% else %}
                        <option id="{{item}}-A1Stereo2" value="aac2">AAC Stereo (foreign/misc)</option>
                        {% endif %}
                        {% if info[item]['dd_supported'] %}
                        {% if accounts[item]['audio1'] == 'dd1' %}
                        <option class="{{item}}-dd" id="{{item}}-A1Dolby1" value="dd1" selected>AC-3 Dolby 5.1 (original)</option>
                        {% elif accounts[item]['manifest_type'] == 'hls5' %}
                        <option class="{{item}}-dd" id="{{item}}-A1Dolby1" value="dd1" disabled>AC-3 Dolby 5.1 (original)</option>
                        {% else %}
                        <option class="{{item}}-dd" id="{{item}}-A1Dolby1" value="dd1">AC-3 Dolby 5.1 (original)</option>
                        {% endif %}
                        {% endif %}
                    </select>
                </div>
                <div class="input-group" style="margin-top: 5px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-music-note" viewBox="0 0 16 16">
                      <path d="M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2z"/>
                      <path fill-rule="evenodd" d="M9 3v10H8V3h1z"/>
                      <path d="M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5V2.82z"/>
                    </svg>
                    <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                        Audio 2*
                    </p>
                    <select id="{{item}}-A2" class="form-select {{item}}-audio" style="margin: auto;">
                        {% if accounts[item]['audio2'] == 'none' %}
                        <option id="{{item}}-A2None" value="none" selected>None</option>
                        {% else %}
                        <option id="{{item}}-A2None" value="none">None</option>
                        {% endif %}
                        {% if accounts[item]['audio2'] == 'aac1' %}
                        <option id="{{item}}-A2Stereo1" value="aac1" selected>AAC Stereo (original)</option>
                        {% else %}
                        <option id="{{item}}-A2Stereo1" value="aac1">AAC Stereo (original)</option>
                        {% endif %}
                        {% if accounts[item]['audio2'] == 'aac2' %}
                        <option id="{{item}}-A2Stereo2" value="aac2" selected>AAC Stereo (foreign/misc)</option>
                        {% else %}
                        <option id="{{item}}-A2Stereo2" value="aac2">AAC Stereo (foreign/misc)</option>
                        {% endif %}
                        {% if info[item]['dd_supported'] %}
                        {% if accounts[item]['audio2'] == 'dd1' %}
                        <option class="{{item}}-dd" id="{{item}}-A2Dolby1" value="dd1" selected>AC-3 Dolby 5.1 (original)</option>
                        {% elif accounts[item]['manifest_type'] == 'hls5' %}
                        <option class="{{item}}-dd" id="{{item}}-A2Dolby1" value="dd1" disabled>AC-3 Dolby 5.1 (original)</option>
                        {% else %}
                        <option class="{{item}}-dd" id="{{item}}-A2Dolby1" value="dd1">AC-3 Dolby 5.1 (original)</option>
                        {% endif %}
                        {% endif %}
                    </select>
                </div>
                <div id="{{item}}-submission" class="input-group" style="margin-top: 3px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                    </svg>
                    <p id="{{item}}-submission-message" style="margin-top: auto; margin-bottom: auto; margin-left: 5px;">
                        ERROR
                    </p>
                </div>
                <div class="d-grid gap-2" style="margin-top: 20px;">
                    <button id="{{item}}-submit-provider-form" type="button" class="btn btn-primary float-right">Save settings</button>
                </div>
            </div>
        </div>

    </div>
</div>

{% endfor %}

<!-- Settings -->

<div id="settings" class="card design" style="margin-top: 10px; margin-bottom: 10%" hidden>
    <div id="settings-card-header" class="card-header text-white bg-primary">
        <a id="settings-link" class="stretched-link card-link" href="#"></a>
        <div class="input-group">
            <svg class="bi text-white" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
            </svg>
            <p id="settings-header" style="margin-bottom: 0px;">
                Settings
            </p>
        </div>
    </div>
    <div id="settings-body" class="card-body">
        <p style="margin-top: 10px; margin-bottom: 10px">Change the general API settings (file/access links and provider setup).</p>
        <div class="input-group" style="margin-top: 5px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-plus-circle" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
            </svg>
            <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                Add new provider to API setup
            </p>
        </div>
        <div class="d-grid gap-2" style="margin-top: 5px;">
            <button id="add-provider" type="button" class="btn btn-primary float-right">Add provider</button>
        </div>

        <div class="input-group" style="margin-top: 10px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-file-code" viewBox="0 0 16 16">
              <path d="M6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zm2.708 0a.5.5 0 1 0-.708.708L10.293 8 8.646 9.646a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2z"/>
              <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
            </svg>
            <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                Advanced M3U settings
            </p>
        </div>
        <div style="margin-top: 5px;">
            {% if basic.get('logo_dark', False) %}
            <input class="form-check-input" type="checkbox" id="logo-dark" checked>
            {% else %}
            <input class="form-check-input" type="checkbox" id="logo-dark">
            {% endif %}
            <label class="form-check-label" for="logo-dark">Use dark channel logos</label>
        </div>
        <div>
            {% if basic.get('ffmpeg_re', True) %}
            <input class="form-check-input" type="checkbox" id="ffmpeg-re">
            {% else %}
            <input class="form-check-input" type="checkbox" id="ffmpeg-re" checked>
            {% endif %}
            <label class="form-check-label" for="ffmpeg-re">Disable ffmpeg -re option</label>
        </div>
        <div>
            {% if basic.get('m3u8_ext', False) %}
            <input class="form-check-input" type="checkbox" id="m3u8-ext" checked>
            {% else %}
            <input class="form-check-input" type="checkbox" id="m3u8-ext">
            {% endif %}
            <label class="form-check-label" for="m3u8-ext">Enable ".m3u8" link extension</label>
        </div>

        <div class="input-group" style="margin-top: 10px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
              <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                Custom IP address / domain path
            </p>
        </div>
        <div class="input-group">
            <input id="custom-path" type="text" class="form-control" placeholder="(default)" value="{{basic.get('ip', '')}}">
            <button id="submit-address-path" type="button" class="btn btn-primary">Save</button>
        </div>
        <p style="margin-top: 3px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Edit the web address/port mentioned in the M3U playlists. Example: "http://192.168.1.1:5000"</p>

        <div class="input-group" style="margin-top: 5px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
              <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                Custom ffmpeg binary path
            </p>
        </div>
        <div class="input-group">
            <input id="custom-ffmpeg-path" type="text" class="form-control" placeholder="ffmpeg" value="{{basic.get('ffmpeg_path', '')}}">
            <button id="submit-ffmpeg-path" type="button" class="btn btn-primary">Save</button>
        </div>
        <p style="margin-top: 3px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Edit the ffmpeg binary path to be mentioned in the M3U playlists. Example: "/usr/bin/ffmpeg"</p>

        <div class="input-group" style="margin-top: 5px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
              <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                Cross-Origin Resource Sharing
            </p>
        </div>
        <div class="input-group">
            <input id="custom-allow-headers" type="text" class="form-control" placeholder="(none)" value="{{basic.get('access_control', '')}}">
            <button id="submit-allow-headers" type="button" class="btn btn-primary">Save</button>
        </div>
        <p style="margin-top: 3px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Allow foreign websites to embed your Live TV streams (disabled by default).</p>

        <div class="input-group" style="margin-top: 5px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
              <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <p style="margin-top: auto; margin-bottom: auto; margin-left: 5px; margin-right: 5px;">
                Custom API port
            </p>
        </div>
        <div class="input-group">
            <input id="custom-port" type="number" class="form-control" maxlength="5" min="0" max="99999" placeholder="5000" value="{{basic.get('port', '')}}">
            <button id="submit-port" type="button" class="btn btn-primary">Update and restart</button>
        </div>
        <p style="margin-top: 3px; margin-bottom: 10px; margin-left: 5px; font-size: 10px">Select a custom port to be used to access the API (without routing).</p>

        <div id="custom-submission" class="input-group" style="margin-top: 3px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-top: auto; margin-bottom: auto;" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
            </svg>
            <p id="custom-submission-message" style="margin-top: auto; margin-bottom: auto; margin-left: 5px;">
                ERROR
            </p>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
    var test = {{availability|tojson}}
</script>
<script type="text/javascript" src="/static/js/status.js"></script>

<link rel="stylesheet" type="text/css" href="/static/css/cards.css">

{% endblock %}