{% extends "base.html" %}

{% block content %}
<br>
<div style="margin-bottom: 1em;" class="ui one column centered grid">
    <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>


<div class="ui one column centered grid" style="margin-bottom: 1.4em;">
    <div class="ui icon message" style=" width: 55%;">
        <i class="info circle icon"></i>
        <div class="content">
        <div class="header">
            Imports can take up to 2 minutes.
        </div>
        <p>But you can still use Yotter.</p>
        </div>
    </div>
</div>

<div class="ui one column centered grid">
    <div class="ui relaxed divided list">
        <div class="item">
            <i class="large download middle aligned icon"></i>
            <div class="content">
            <a href="{{ url_for('export') }}" class="header">Export Data</a>
            <div class="description">Export data into JSON file</div>
            </div>
        </div>
        <div class="item">
            <i class="large upload middle aligned icon"></i>
            <div class="content">
                <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 class="description">Import subscription data.</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>-->

        <!-- INSTANCE INFO -->
        <h1 class="ui header">Instance 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>Server location:</b> {{info.location}}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}