{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <h1>Settings for {{ logged_in }}</h1><hr />
        <form method="POST" action="/settings" class="col-lg-6">
            <div class="form-group row">
                <h2>Profile Fields</h2>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1"><i class="far fa-fw fa-user"></i></span>
                    </div>
                    <input type="text" name="bio" class="form-control" placeholder="Bio" aria-describedby="basic-addon1" value="{{ account.profile.bio }}">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1"><i class="far fa-fw fa-map-marker"></i></span>
                    </div>
                    <input type="text" name="location" class="form-control" placeholder="Location" aria-describedby="basic-addon1" value="{{ account.profile.location }}">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1"><i class="far fa-fw fa-transgender-alt"></i></span>
                    </div>
                    <input type="text" name="gender" class="form-control" placeholder="Gender" aria-describedby="basic-addon1" value="{{ account.profile.gender }}">
                </div>

                <h2>Site Theme</h2>

                <div class="input-group mb-3">
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline1" name="theme" value="default" class="custom-control-input" {% if theme=="default" %}checked{% endif %}>
                      <label class="custom-control-label" for="customRadioInline1">Default</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline2" name="theme" value="darkly" class="custom-control-input" {% if theme=="darkly" %}checked{% endif %}>
                      <label class="custom-control-label" for="customRadioInline2">Darkly</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline3" name="theme" value="cyborg" class="custom-control-input" {% if theme=="cyborg" %}checked{% endif %}>
                      <label class="custom-control-label" for="customRadioInline3">Cyborg</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline4" name="theme" value="materia" class="custom-control-input" {% if theme=="materia" %}checked{% endif %}>
                      <label class="custom-control-label" for="customRadioInline4">Materia</label>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
{% endblock %}