{% extends 'admin/base.html.twig' %}

{% block content %}

    <div class="container-fluid">

        {% embed "admin/panels/page-title-panel.html.twig" %}
            {% block pageTitle %}
                User Guide
            {% endblock %}
        {% endembed %}

        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card pt-2 pb-2">

                    <div class="card-header border-0 bg-transparent pb-0">
                    </div>

                    <div class="card-body p-3">

                        <h3 class="acba-blue-font">How Do I...</h3>

                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                        Create News Page?
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                        Add a User with Content Privileges?
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                        Create/Delete a Resource?
                                    </button>
                                </h2>
                                <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
                                </div>
                            </div>


                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingFour">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
                                        Update About Us Page?
                                    </button>
                                </h2>
                                <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingFive">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
                                        Update About Us Page?
                                    </button>
                                </h2>
                                <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
                                </div>
                            </div>

                        </div>

{#                        <div class="panel-group accordion" id="custom-accordion" role="tablist" aria-multiselectable="true">#}
{#                            <div class="panel panel-default accordion-item">#}
{#                                <div class="panel-heading" role="tab" id="headingOne">#}
{#                                    <h4 class="panel-title">#}
{#                                        <a role="button" data-bs-toggle="collapse" data-bs-parent="#custom-accordion" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">#}
{#                                            Why you choose Titanic?#}
{#                                        </a>#}
{#                                    </h4>#}
{#                                </div>#}
{#                                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">#}
{#                                    <div class="panel-body">#}
{#                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="panel panel-default accordion-item">#}
{#                                <div class="panel-heading" role="tab" id="headingTwo">#}
{#                                    <h4 class="panel-title">#}
{#                                        <a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#custom-accordion" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">#}
{#                                            Why Titanic best?#}
{#                                        </a>#}
{#                                    </h4>#}
{#                                </div>#}
{#                                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">#}
{#                                    <div class="panel-body">#}
{#                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="panel panel-default accordion-item">#}
{#                                <div class="panel-heading" role="tab" id="headingThree">#}
{#                                    <h4 class="panel-title">#}
{#                                        <a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#custom-accordion" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">#}
{#                                            How to apply Titanic jobs?#}
{#                                        </a>#}
{#                                    </h4>#}
{#                                </div>#}
{#                                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">#}
{#                                    <div class="panel-body">#}
{#                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="panel panel-default accordion-item">#}
{#                                <div class="panel-heading" role="tab" id="headingFour">#}
{#                                    <h4 class="panel-title">#}
{#                                        <a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#custom-accordion" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">#}
{#                                            How experts Titanic team member?#}
{#                                        </a>#}
{#                                    </h4>#}
{#                                </div>#}
{#                                <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">#}
{#                                    <div class="panel-body">#}
{#                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="panel panel-default accordion-item">#}
{#                                <div class="panel-heading" role="tab" id="headingFive">#}
{#                                    <h4 class="panel-title">#}
{#                                        <a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#custom-accordion" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">#}
{#                                            How Titanic give customer support?#}
{#                                        </a>#}
{#                                    </h4>#}
{#                                </div>#}
{#                                <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">#}
{#                                    <div class="panel-body">#}
{#                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts_post_body %}
    <script type="text/javascript">
        $(function () {
            // $(".edit-entity-btn, #create-widget-btn").on('click', (e) => {
            //
            //     e.preventDefault();
            //     let clickedElement = $(e.target);
            //     if (e.target.tagName.toLowerCase() === 'i' ) {
            //         clickedElement = $(e.target).closest('a');
            //     }
            //
            //     let formType = clickedElement.hasClass('edit-entity-btn') ? 'Update' : 'Add a new';
            //     let title = formType + " Block";
            //     let path = clickedElement.attr('data-url');/**/
            //
            //     window.customBootstrap.generateEntityModalForm(path, title, true);
            //     window.refreshTextAreas();
            // });
        });
    </script>
{% endblock %}