{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/currency.js' %}"></script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <div class="accordion custom-accordion" id="custom-accordion-one">
                        <div class="card mb-1">
                            <div class="card-header" id="headingFour">
                                <h5 class="m-0">
                                    <a class="custom-accordion-title text-uppercase d-block py-1"
                                       data-bs-toggle="collapse" href="#collapseFour"
                                       aria-expanded="true" aria-controls="collapseFour">
                                        Choose currency <i
                                            class="mdi mdi-chevron-down accordion-arrow"></i>
                                    </a>
                                </h5>
                            </div>

                            <div id="collapseFour" class="collapse show"
                                 aria-labelledby="headingFour"
                                 data-bs-parent="#custom-accordion-one">
                                <div class="card-body">
                                    <h6 class="font-13 mt-3">Choose a currency to be associated with all accounts</h6>
                                    {% if 'update_currency_settings' in user_perms %}
                                        <form>
                                            <div class="row gy-2 gx-2 align-items-center">
                                                <div class="col-md-4">
                                                    <label class="visually-hidden" for="country_select">select
                                                        currency</label>
                                                    <select class="form-control mb-2 select2" data-toggle="select2"
                                                            id="country_select" name="who_setting" value="">
                                                        <option value="" selected disabled>select currency</option>
                                                        {% for currency in allTheCurrencies %}
                                                            <option value="{{ currency.currency }}"
                                                                    {% if currency.currency == obj.currency %}selected{% endif %}>{{ currency.currency }}
                                                                ({{ currency.country }})
                                                            </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="submit" class="btn btn-primary" id="changeCurrency"
                                                            onclick="handleSubmitCurrency({{ obj.id }})">
                                                        Update currency
                                                    </button>
                                                    <div class="spinner-border text-danger mb-2" role="status"
                                                         id="submittingCurrency" style="display: none;">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="card mb-0">
                            <div class="card-header" id="headingFive">
                                <h5 class="m-0">
                                    <a class="custom-accordion-title text-uppercase collapsed d-block py-1"
                                       data-bs-toggle="collapse" href="#collapseFive"
                                       aria-expanded="false" aria-controls="collapseFive">
                                        Currency indications <i
                                            class="mdi mdi-chevron-down accordion-arrow"></i>
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseFive" class="collapse"
                                 aria-labelledby="headingFive"
                                 data-bs-parent="#custom-accordion-one">
                                <div class="card-body">
                                    <h6 class="font-13 mt-3">Choose whether to indicate the currency code chosen
                                        alongside
                                        money or not</h6>
                                    {% if 'update_currency_settings' in user_perms %}
                                        <form>
                                            <div class="row gy-2 gx-2 align-items-center">
                                                <div class="col-md-4">
                                                    <label class="visually-hidden" for="show_select">Name</label>
                                                    <select class="form-control" id="show_select"
                                                            name="who_setting" value="">
                                                        <option value="" selected disabled>select show or not to show
                                                        </option>
                                                        <option value="s" {% if obj.show_currency %}selected{% endif %}>
                                                            Show
                                                            currency code
                                                        </option>
                                                        <option value="d"
                                                                {% if not obj.show_currency %}selected{% endif %}>
                                                            Dont
                                                            show currency code
                                                        </option>
                                                    </select>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="submit" class="btn btn-primary" id="changeShow"
                                                            onclick="handleSubmitCurrencyShow({{ obj.id }})">
                                                        Update currency code indication
                                                    </button>
                                                    <div class="spinner-border text-danger" role="status"
                                                         id="submittingShow" style="display: none;">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End col -->
        </div>
    </div>

{% endblock %}