{% extends 'layout.html' %}
{% block nav_settings %}active{% endblock %}
{% block content %}
    <div class="container">
        {% if saved %}
            <div class="alert alert-success alert-dismissable fade show">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <b>Success!</b> Your settings have been saved
            </div>
        {% endif %}
        <h1>Settings for {{ logged_in }}</h1><hr />
        <form method="POST" action="/settings" class="col-lg-6" enctype="multipart/form-data">
            <div class="form-group">

                <h2>Profile Picture</h2>
                {% if account.profile.profile_pic %}
                    <img src="/files/{{ account.profile.profile_pic }}" class="rounded float-left mr-3 d-inline" style="max-height: 100px;"/>
                {% endif %}
                <input type="file" name="profile_pic" class="form-control my-2 d-inline">

                <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="form-group row">
                    <label for="colFormLabel" class="col-sm-2 col-form-label col-form-label">Gender</label>
                    <div class="col-sm-10">
                        <div class="custom-control custom-radio custom-control-inline mt-2">
                            <input type="radio" id="genderInline1" name="gender" value="Male" class="custom-control-input" {% if account.profile.gender=="Male" %}checked{% endif %}>
                            <label class="custom-control-label" for="genderInline1" onclick={document.getElementById("john").style="display:none;"}>Male</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline mt-2">
                            <input type="radio" id="genderInline2" name="gender" value="Female" class="custom-control-input" {% if account.profile.gender=="Female" %}checked{% endif %}>
                            <label class="custom-control-label" for="genderInline2" onclick={document.getElementById("john").style="display:none;"}>Female</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline mt-2">
                            <input type="radio" id="genderInline3" name="gender" value="Non-Binary" class="custom-control-input" {% if account.profile.gender and account.profile.gender!="Female" and account.profile.gender!="Male" %}checked{% endif %}>
                            <label class="custom-control-label" for="genderInline3" onclick={document.getElementById("john").style="display:block;"}>Other</label>
                        </div>
                    <input type="text" id="john" name="gender-custom" style="display:none;" name="location" class="form-control mt-2" placeholder="Gender" aria-describedby="basic-addon1" value="{{ account.profile.gender }}">


                    </div>
                </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 class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline5" name="theme" value="slate" class="custom-control-input" {% if theme=="slate" %}checked{% endif %}>
                      <label class="custom-control-label" for="customRadioInline5">Slate</label>
                    </div>
                </div>

                <h2>Account Settings</h2>

                <div class="input-group mb-3">
                    <a href="/changepass" class="btn btn-link">I want to change my password</a>
                </div>

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