{% extends "base.html" %}

{% block content %}
<br>
<div class="ui center aligned text container">
    <h2 class="ui icon header">
        <i class="settings icon"></i>
        <div class="content">
            Settings
            <div class="sub header">Manage your settings.</div>
        </div>
    </h2>
</div>

<h2 class="ui centered header">
    Imports can take up to 2 minutes.
    <div class="sub header">You can still use Yotter.</div>
  </h2>

<div class="ui center aligned text container">
    <div class="ui segments">
        <div class="ui segment">
            <div class="item">
                <i class="large download middle aligned icon"></i>
                <div class="content">
                    <div class="description"><h5 class="ui header">Export data into JSON file</h5></div>
                    <a href="{{ url_for('export') }}" class="header">Export Data</a>
                </div>
            </div>
        </div>
        <div class="ui blue segment">
            <i class="large upload middle aligned icon"></i>
            <div class="content">
                <div class="description"><h5 class="ui header">Import suscription data</h5></div>
                <form action = "{{ url_for('importdata') }}" method = "POST" enctype = "multipart/form-data">
                    <input type = "file" name = "file"/>
                    <input type = "submit"/>
                    <br>
                    <label class="radio-inline">
                        <input type="radio" name="import_format" id="yotter" value="yotter" checked> Yotter
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="import_format" id="newpipe" value="newpipe"> NewPipe
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="import_format" id="youtube" value="youtube"> Youtube
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="import_format" id="freetube" value="freetube"> FreeTube
                    </label>
                </form>
            </div>
        </div>
    </div>

        <!--<div class="item">
            <i class="large moon middle aligned icon"></i>
            <div class="content">
                <div class="ui slider checkbox">
                    <input type="checkbox" name="newsletter">
                    <label>Dark mode</label>
                </div>
            </div>
        </div>
        <div class="item">
            <i class="large weight middle aligned icon"></i>
            <div class="content">
                <div class="ui slider checkbox">
                    <input type="checkbox" name="newsletter">
                    <label>Disable images</label>
                    <div class="description">Show links instead</div>
                </div>
            </div>
        </div>-->

        <div class="ui segment">
            <label for="toggle">I want to delete my account.</label>
            <input type="checkbox" id="toggle">
            <div class="control-me"><a href="/deleteme"><button class="ui red button">Delete account</button></a></div>   
        </div>

        <!-- INSTANCE INFO -->
        <h1 class="ui header">{{info.serverName}} Info</h1>
        <div class="ui segments">
            <div class="ui segment">
                <p><b>Total users:</b> {{info.totalUsers}}</p>
            </div>
            <div class="ui segment">
                <p><b>Active users:</b> {{info.active}}</p>
            </div>
            <div class="ui segment">
                <p><b>Server location:</b> {{info.location}}</p>
            </div>
            <div class="ui segment">
                <p><a href="https://github.com/pluja/Yotter#donate">Consider making a donation</a></p>
            </div>
    </div>
</div>
{% endblock %}