{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <h1>Settings for SocksPls</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="{{ 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="{{ 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="{{ profile.gender }}">
                </div>

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