{% extends 'supplier-panel/supplier-base.html' %}
{%load static%}

{%block section %}

<section class="content-main">
    <div class="content-header">
        <h2 class="content-title">Profile setting</h2>
        
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row gx-5">
                <aside class="col-lg-3 border-end">
                    <nav class="nav nav-pills flex-lg-column mb-4">
                        <a class="nav-link"  href="{% url 'supplier_dashboard:bank-info' %}">Bank information </a>
                        <a class="nav-link active" aria-current="page" href="{% url 'supplier_dashboard:social-links' %}">Social Links</a>
                    
                    </nav>
                </aside>
                <div class="col-lg-9">
                    {% if messages %}
                    {% for message in messages %}
      
                    <div    class="alert align-middle alert-{{message.tags}}">
                       
                        <span class="align-middle"> {{message}}</span>
                    </div>
      
                    {% endfor %}
                    {% endif %}
                    <section class="content-body p-xl-4">
                        <form action="{% url 'supplier_dashboard:social-links' %}" method="post">
                            {% csrf_token %}
                            <div class="row">

                                <div class="col-lg-12">
                                    <div class="row gx-3">
                                        <div class="col-12 mb-3">
                                            <label class="form-label">Facebook</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text px-2">https://facebook.com/</span>
                                                <input class="form-control" placeholder="Ex: {alithemes}"  name="facebook" type="text" {% if social_links_obj %} value="{{social_links_obj.facebook}}"{% endif %} >
                                                <span class="input-group-text">
                                                 <img src="{% static 'assets-supplier/imgs/icons/social-facebook.svg'%}" alt="Facebook">
                                                </span>
                                            </div>
                                        </div>
                                       
                                        <!-- col .// -->
                                    </div>
                                    <!-- row.// -->
                                </div>
                                <div class="col-lg-12">
                                    <div class="row gx-3">
                                        <div class="col-12 mb-3">
                                            <label class="form-label">Twitter</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text px-2">https://twitter.com/</span>
                                                <input class="form-control" placeholder="Ex: {AliThemesins}" name="twitter" type="text"  {% if social_links_obj %} value="{{social_links_obj.twitter}}"{% endif %}>
                                                <span class="input-group-text">
                                                 <img src="{% static 'assets-supplier/imgs/icons/social-twitter.svg'%}" alt="twitter">
                                                </span>
                                            </div>
                                        </div>
                                       
                                        <!-- col .// -->
                                    </div>
                                    <!-- row.// -->
                                </div>
                                <div class="col-lg-12">
                                    <div class="row gx-3">
                                        <div class="col-12 mb-3">
                                            <label class="form-label">Instagram</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text px-2">https://instagram.com/</span>
                                                <input class="form-control" placeholder="Ex: {alithemes}"  name="instagram" type="text" {% if social_links_obj %} value="{{social_links_obj.instagram}}"{% endif %}>
                                                <span class="input-group-text">
                                                 <img src="{% static 'assets-supplier/imgs/icons/social-instagram.svg'%}" alt="instagram">
                                                </span>
                                            </div>
                                        </div>
                                       
                                        <!-- col .// -->
                                    </div>
                                    <!-- row.// -->
                                </div>
                                <div class="col-lg-12">
                                    <div class="row gx-3">
                                        <div class="col-12 mb-3">
                                            <label class="form-label">Pinterest</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text px-2">https://pinterest.com/</span>
                                                <input class="form-control" placeholder="Ex: {alithemes}"  name="pinterest" type="text" {% if social_links_obj %} value="{{social_links_obj.pinterest}}"{% endif %}>
                                                <span class="input-group-text">
                                                 <img src="{% static 'assets-supplier/imgs/icons/social-pinterest.svg'%}" alt="pinterest">
                                                </span>
                                            </div>
                                        </div>
                                       
                                        <!-- col .// -->
                                    </div>
                                    <!-- row.// -->
                                </div>
                                
                            </div>
                            <!-- row.// -->
                            <br />
                            <button class="btn btn-primary" type="submit">Save changes</button>
                        </form>
                        <hr class="my-5" />
                        <div class="row" style="max-width: 920px">
                            <div class="col-md">
                                <article class="box mb-3 bg-light">
                                    <a class="btn float-end btn-light btn-sm rounded font-md" href="{% url 'accounts:change_password' %}">Change</a>
                                    <h6>Password</h6>
                                    <small class="text-muted d-block" style="width: 70%">You can reset or change your password by clicking here</small>
                                </article>
                            </div>
                            <!-- col.// -->
                            <div class="col-md">
                                <article class="box mb-3 bg-light">
                                    <a class="btn float-end btn-light rounded btn-sm font-md" href="{% url 'accounts:account_details'%}">Edit</a>
                                    <h6>Account Details</h6>
                                    <small class="text-muted d-block" style="width: 70%">manage your account details by clicking here.</small>
                                </article>
                            </div>
                            <!-- col.// -->
                        </div>
                        <!-- row.// -->
                    </section>
                    <!-- content-body .// -->
                </div>
                <!-- col.// -->
            </div>
            <!-- row.// -->
        </div>
        <!-- card body end// -->
    </div>
    <!-- card end// -->
</section>

{%endblock section%}

{%block script%} 
{%endblock script%}