{% extends "layouts/base.html" %}
{% from 'helpers/_forms.html' import render_field %}

{% block title %} Edit User {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}
{% block content %}
<main class="content">

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

    <div class="py-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#"><span class="fas fa-home"></span></a></li>
                <li class="breadcrumb-item"><a href="/users-list">Users</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0">
                <h1 class="h4">User Edit {{data_json.username}}</h1>
            </div>
            <div>
                <a href="" class="btn btn-outline-gray"><i class="far fa-question-circle mr-1"></i> Users Docs</a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 mb-4">
            <div class="card border-light shadow-sm components-section">
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-lg-4 col-sm-6">
                            <!-- Form -->
                            <div class="col-md-12 col-md-offset-1">
                                <form  method="post">
                                    <div class="form-group">
                                        {% for key, value in data_json.items() %}

                                        <!-- Username -->
                                        {% if key == "username" %}
                                        <span style="text-transform:capitalize">
                                            <h6><strong>{{key}}</strong></h6>
                                        </span>
                                        <div class="form-group">
                                            <span style="text-transform:capitalize">
                                            </span>
                                            <input type="text" name={{ key }} value={{ value }} class='form-control' placeholder={{key}} autocomplete="off">
                                        </div>
                                        <!-- Fullname -->
                                        {% elif key == "fullname" %}
                                        <div class="form-group">
                                            <span style="text-transform:capitalize">
                                                <h6><strong>{{key}}</strong></h6>
                                            </span>
                                            <input type="text" name={{ key }} value="{{ value }}" class='form-control' autocomplete="off">
                                        </div>
                                        <!-- Email -->
                                        {% elif key == "email" %}
                                        <div class="form-group">
                                            <span style="text-transform:capitalize">
                                                <h6><strong>{{key}}</strong></h6>
                                            </span>
                                            <input type="email" value={{ value }} name={{ key }} class='form-control' autocomplete="off" placeholder={{key}}>
                                        </div>
                                        <!--Pasword-->
                                        {% elif key == "password" %}
                                        <div class="form-group">
                                            <span style="text-transform:capitalize">
                                                <h6><strong>{{key}}</strong></h6>
                                            </span>
                                            <input type="password" name={{ key }} class='form-control' placeholder={{key}} autocomplete="off">
                                        </div>
                                        <!--Role-->
                                    {% elif key == "role" %}
                                    {% if  "yoda" in current_user.role %}
                                        <div class="form-group">
                                        <h6><strong>Role</strong></h6>
                                        <select class="form-control" value={{ value }} name=role v-model="role">
                                            {%if value|length > 1 and "yoda" in value %}
                                            <option value=yoda,R2-D2>bot yoda</option>
                                            <option value=darth_vader,R2-D2>bot darth_vader</option>
                                            <option value=stormtrooper,R2-D2>bot stormtrooper</option>
                                            <option value=yoda>yoda</option>
                                            <option value=darth_vader>darth_vader</option>
                                            <option value=stormtrooper>stormtrooper</option>
                                            {%elif value|length > 1 and "darth_vader" in value %}
                                            <option value=darth_vader,R2-D2>bot darth_vader</option>
                                            <option value=yoda,R2-D2>bot yoda</option>
                                            <option value=stormtrooper,R2-D2>bot stormtrooper</option>
                                            <option value=yoda>yoda</option>
                                            <option value=darth_vader>darth_vader</option>
                                            <option value=stormtrooper>stormtrooper</option>
                                            {%elif value|length > 1 and "stormtrooper" in value %}
                                            <option value=stormtrooper,R2-D2>bot stormtrooper</option>
                                            <option value=darth_vader,R2-D2>bot darth_vader</option>
                                            <option value=yoda,R2-D2>bot yoda</option>
                                            <option value=yoda>yoda</option>
                                            <option value=darth_vader>darth_vader</option>
                                            <option value=stormtrooper>stormtrooper</option>
                                            {%elif "yoda" in value %}
                                            <option value=yoda>yoda</option>
                                            <option value=darth_vader>darth_vader</option>
                                            <option value=stormtrooper>stormtrooper</option>
                                            <option value=stormtrooper,R2-D2>bot stormtrooper</option>
                                            <option value=darth_vader,R2-D2>bot darth_vader</option>
                                            <option value=yoda,R2-D2>bot yoda</option>
                                            {%elif "darth_vader" in value %}
                                            <option value=darth_vader>darth_vader</option>
                                            <option value=yoda>yoda</option>
                                            <option value=stormtrooper>stormtrooper</option>
                                            <option value=stormtrooper,R2-D2>bot stormtrooper</option>
                                            <option value=darth_vader,R2-D2>bot darth_vader</option>
                                            <option value=yoda,R2-D2>bot yoda</option>
                                            {%elif "stormtrooper" in value %}
                                            <option value=stormtrooper>stormtrooper</option>
                                            <option value=darth_vader>darth_vader</option>
                                            <option value=yoda>yoda</option>
                                            <option value=stormtrooper,R2-D2>bot stormtrooper</option>
                                            <option value=darth_vader,R2-D2>bot darth_vader</option>
                                            <option value=yoda,R2-D2>bot yoda</option>
                                            {% endif %}
                                        </select>
                                        </div>
                                        <div class="form-group">
                                    {% else %}
                                        <div class="form-group">
                                        <h6><strong>Role</strong></h6>
                                        <input type="text" value="{{ value|join(",") }}"
                                               name=role  autocomplete="off" class='form-control' readonly>
                                        </div>
                                    {% endif %}
                                        </div>
                                        <!--is-active-->
                                        {% elif key == "is_active" %}
                                        <div class="form-group">
                                            <span style="text-transform:capitalize">
                                                <h6><strong>{{key}}</strong></h6>
                                            </span>
                                            <select class="form-control" name={{key}} v-model="is_active">
                                            {% if data_json.is_active %}
                                                <option value=true>Yes</option>
                                                <option value=false>No</option>
                                            {% else %}
                                                <option value=false>No</option>
                                                <option value=true>Yes</option>
                                            {% endif %}
                                            </select>
                                        </div>
                                        <!--squad-->
                                        {% elif key == "squad" %}
                                        <div class="form-group">
                                            <span style="text-transform:capitalize">
                                                <h6><strong>{{key}}</strong></h6>
                                            </span>
                                            <input type="text" value="{{ value |join(',')}}" name={{ key }} class='form-control'  autocomplete="off">
                                        </div>
                                        <!--squad-->
                                        {% endif %}

                                        {% endfor %}
                                        <button type="submit" class="btn btn-secondary text-dark" name="button" action="{{url_for('.list_users')}}">
                                            Apply
                                        </button>
                                </form>
                                    </div>

                                    <!-- End Form -->

                                    <div class="input-group">
                                    </div>
                            </div>
                        </div>
                    </div>

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

</main>

{% endblock content %}

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