{% extends "layouts/base.html" %}

{% block title %} Settings {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<main class="content">

    {% include 'includes/navigation.html' %}

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
        <div>
            <button class="btn btn-primary mr-2 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="fas fa-plus mr-2"></span>New
            </button>
            <div class="dropdown-menu dashboard-dropdown dropdown-menu-left mt-2">
                <a class="dropdown-item font-weight-bold" href="stacks-list.html"><span class="fas fa-box-open mr-2"></span>Stack</a>
                <a class="dropdown-item font-weight-bold" href="deploys-list.html"><span class="fas fa-layer-group"></span>Deploy</a>
                <a class="dropdown-item font-weight-bold" href="tasks-logs"><span class="fas fa-tasks mr-2"></span>tasks</a>
            </div>
        </div>
        <div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-xl-8">
            <div class="card card-body bg-white border-light shadow-sm mb-4">
                <h2 class="h5 mb-4">General information</h2>
                <form class="form-control" method="post">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div>
                                <label for="name">Username</label>
                                <input type="text" value="{{ current_user.username }}" name=username  autocomplete="off" class='form-control' readonly>
                            </div>
                            <div>
                                <label for="last_name">Fullname</label>
                                <input type="text" value="{{ current_user.fullname }}" name=fullname  autocomplete="off" class='form-control' readonly>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-md-6 mb-3">
                            <label for="email">Email</label>
                            <div class="input-group">
                                <input type="text" value="{{ current_user.email }}" name=email autocomplete="off" class='form-control' readonly>
                            </div>
                            <div>
                                <label for="name">Role</label>
                                <input type="text" value="{{ current_user.role|join(",") }}" name=role  autocomplete="off" class='form-control' readonly>
                            </div>
                            <div>
                                <label for="name">Squad</label>
                                <input type="text" value="{{ current_user.squad|join(",") }}" name=squad  autocomplete="off" class='form-control' readonly>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="form-group">
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-group">
                            </div>
                        </div>
                    </div>
                    <h2 class="h5 my-4">Password</h2>
                    <div class="row">
                        <div class="col-sm-9 mb-3">
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input class="form-control" type="password" autocomplete="off" name=password placeholder="Enter your new secret Password" >
                            </div>
                        </div>
                        <div class="col-sm-3 mb-3">
                            <div class="form-group">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 mb-3">
                            <div class="form-group">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary " name="button" action="{{url_for('.setting_user')}}">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="card border-light text-center p-0">
                        <div class="profile-cover rounded-top" data-background="/static/assets/img/profile-cover.jpg"></div>
                        <div class="card-body pb-5">
                            {% if "yoda" in current_user.role %}
                            <img src="/static/assets/img/team/root.png" class="user-avatar large-avatar rounded-circle mx-auto mt-n7 mb-4" alt="">
                            {% elif "darth_vader" in current_user.role %}
                            <img src="/static/assets/img/team/admin.png" class="user-avatar large-avatar rounded-circle mx-auto mt-n7 mb-4" alt="">
                            {% else %}
                            <img src="/static/assets/img/team/user.png" class="user-avatar large-avatar rounded-circle mx-auto mt-n7 mb-4" alt="Image placeholder">
                            {% endif %}
                            <div class="media-body ml-2 text-dark align-items-center d-none d-lg-block">
                                <h4 class="h3">
                                    {{ current_user.fullname }}
                                </h4>
                                <h5 class="font-weight-normal">
                                    {{ current_user.email }}
                                </h5>
                                <h4 class="h3">
                                    {{current_user.squad}}
                                </h4>
                            {% if "yoda" in current_user.role %}
                                <p class="text-gray mb-4">Always pass on what you have learned</p>
                            {% elif "darth_vader" in current_user.role %}
                                <p class="text-gray mb-4">I am  your father</p>
                            {% else %}
                                <p class="text-gray mb-4">Let me see your identification</p>
                            {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card card-body bg-white border-light shadow-sm mb-4">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    {% include 'includes/footer.html' %}

</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}