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

{% block page_header %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{  url('dashboard') }}">{{_("Dashboard",2)}}</a></li>
        <li class="breadcrumb-item">{{_("Settings",2)}}</li>
        <li class="breadcrumb-item active" aria-current="page">{{_("Themes",2)}}</li>
    </ol>
</nav>
{% endblock %}

{% block content %}

<!-- Content Row -->
<div class="row">
    <div class="col-md-8">
        <div class="card card-color-settings">
            <div class="card-header">
                <div class="card-title">
                    {{_("Theme Settings",2)}}
                </div>
            </div>
            <div class="card-body">
                <form id="color-settings">
                    <input type="hidden" name="csrftoken" value="V9C0eTgWrXQwEcfXvZrtFMCfBTmYmQYAnO+XOJrsyDg=">

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label" for="chatpage_layout">Chat Page Layout</label>
                            <select class="form-select" id="chatpage_layout" name="chatpage_layout">
                                <option value="full" selected>Full Width</option>
                                <!-- <option value="boxed">Boxed</option> -->
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label" for="theme">Default Frontend Theme</label>
                            <select class="form-select" id="theme" name="theme">
                                <!-- <option value="default">Hybrid</option> -->
                                <option value="dark" selected>Dark</option>
                                <option value="light">Light</option>
                                <!-- <option value="custom">Custom</option> -->
                            </select>
                        </div>
                    </div>

                    <div class="custom-colors" style="display:none;">
                        <hr>
                        <h4 class="mb-3">Homepage Colors</h4>
                        <div class="row">
                            {% for id, label, val in [
                ['home_bg_gradient_1', 'Background Gradient 1', '#1da1f5'],
                ['home_bg_gradient_2', 'Background Gradient 2', '#8038d9']
            ] %}
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="{{ id }}">{{ label }}</label>
                                <div class="input-group">
                                    <input type="text" name="{{ id }}" value="{{ val }}"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="{{ val }}" class="form-control color-picker">
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        {% set color_inputs = [
            ['home_text_color', 'Text Color', '#555555'],
            ['home_header_bg_color', 'Header background color', '#1f2d41'],
            ['home_header_text_color', 'Header Text Color', '#ffffff']
        ] %}
                        {% for id, label, val in color_inputs %}
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="{{ id }}">{{ label }}</label>
                                <div class="input-group">
                                    <input type="text" name="{{ id }}" value="{{ val }}"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="{{ val }}" class="form-control color-picker">
                                </div>
                            </div>
                        </div>
                        {% endfor %}

                        <hr>
                        <h4 class="mb-3">Chatpage - User List</h4>
                        <div class="row">
                            {% for id, label, val in [
                ['chat_userlist_bg_gradient_1', 'Background Gradient 1', '#4e4f53'],
                ['chat_userlist_bg_gradient_2', 'Background Gradient 2', '#1f2024']
            ] %}
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="{{ id }}">{{ label }}</label>
                                <div class="input-group">
                                    <input type="text" name="{{ id }}" value="{{ val }}"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="{{ val }}" class="form-control color-picker">
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="chat_userlist_text_color">User List Text Color</label>
                                <div class="input-group">
                                    <input type="text" name="chat_userlist_text_color" value="#ffffff"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="#ffffff" class="form-control color-picker">
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h4 class="mb-3">Chat Page - Chat Container</h4>
                        <div class="row">
                            {% for id, label, val in [
                ['chat_container_bg_gradient_1', 'Background Gradient 1', '#ffffff'],
                ['chat_container_bg_gradient_2', 'Background Gradient 2', '#ffffff']
            ] %}
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="{{ id }}">{{ label }}</label>
                                <div class="input-group">
                                    <input type="text" name="{{ id }}" value="{{ val }}"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="{{ val }}" class="form-control color-picker">
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="chat_container_text_color">Chat Container Text
                                    Color</label>
                                <div class="input-group">
                                    <input type="text" name="chat_container_text_color" value="#858796"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="#858796" class="form-control color-picker">
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h4 class="mb-3">Chatpage - Received Chat</h4>
                        <div class="row">
                            {% for id, label, val in [
                ['chat_container_received_bubble_color', 'Bubble Color', '#f5f5f5'],
                ['chat_container_received_text_color', 'Text Color', '#858796']
            ] %}
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="{{ id }}">{{ label }}</label>
                                <div class="input-group">
                                    <input type="text" name="{{ id }}" value="{{ val }}"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="{{ val }}" class="form-control color-picker">
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="chat_container_username_text_color">Group Chat Username
                                    Text Color</label>
                                <div class="input-group">
                                    <input type="text" name="chat_container_username_text_color" value="#4e73df"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="#4e73df" class="form-control color-picker">
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h4 class="mb-3">Chat Page - Sent Chat</h4>
                        <div class="row">
                            {% for id, label, val in [
                ['chat_container_sent_bubble_color', 'Bubble Color', '#435f7a'],
                ['chat_container_sent_text_color', 'Text Color', '#f5f5f5']
            ] %}
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="{{ id }}">{{ label }}</label>
                                <div class="input-group">
                                    <input type="text" name="{{ id }}" value="{{ val }}"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="{{ val }}" class="form-control color-picker">
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <hr>
                        <h4 class="mb-3">Chatpage - Chat Info</h4>
                        <div class="row">
                            {% for id, label, val in [
                ['chat_info_bg_gradient_1', 'Background Gradient 1', '#e9ebec'],
                ['chat_info_bg_gradient_2', 'Background Gradient 2', '#cfd3d6']
            ] %}
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="{{ id }}">{{ label }}</label>
                                <div class="input-group">
                                    <input type="text" name="{{ id }}" value="{{ val }}"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="{{ val }}" class="form-control color-picker">
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="chat_info_section_header_color">Chat Info Section Header
                                    Color</label>
                                <div class="input-group">
                                    <input type="text" name="chat_info_section_header_color" value="#2b3036"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="#2b3036" class="form-control color-picker">
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="chat_info_text_color">Chat Info Text Color</label>
                                <div class="input-group">
                                    <input type="text" name="chat_info_text_color" value="#455A64"
                                        class="form-control w-75 color-input">
                                    <input type="color" value="#455A64" class="form-control color-picker">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="button" class="btn btn-primary w-100 update-settings"
                            value="color-settings">Update</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

{% endblock %}