{% extends 'layouts/admin.twig' %}

{% block content %}

    {{ multisite_toggle_html | raw }}

    <ul class="breadcrumbs el">
        <li><a href="/admin/">Home</a> /</li>
        <li><a href="/shop/admin/products/manage.products.php">Manage Products</a> /</li>
        <li class="end">{{ page_meta.title }}</li>
    </ul>

    <h1>{{ page_meta.title }}</h1>
    {{ tabnav|raw }}

    {% include 'admin/messages.twig' %}

    <div class="content">
        {% if type == 'item' and item.use_category_faq %}
            <div class="row clearfix withLeftMargin">
                <a href="?id={{ id }}&use_category_faq=0&action=change_faq_mode"
                    class="btn">
                    Set up different info for this products FAQ
                </a>
            </div>
        {% else %}
            {% if type == 'item' %}
            <div class="row clearfix withLeftMargin">
                <a href="?id={{ id }}&use_category_faq=1&action=change_faq_mode"
                   class="btn">
                    Revert back to using Landing page FAQ
                </a>
            </div>
            {% endif %}
            <form action="" method="post" class="withLeftMargin">
                <input type="hidden" id="orderbytable" value="items_faq" />
                <input type="hidden" id="orderbyfield" value="order" />
                {% if entries|length > 0 %}
                    <table class="manage-items">
                        <thead>
                        <tr>
                            <th width="5%">Order</th>
                            <th></th>
                            <th width="5%">Actions</th>
                        </tr>
                        <tbody class="tabular ui-sortable">
                            {% for entry in entries %}
                                <tr id="rorder-{{ entry.id }}>">
                                    <td align="center order" style="vertical-align: middle">
                                        <i class="fa fa-arrows"></i>
                                    </td>
                                    <td>
                                        <div class="row">
                                            <label for="question-{{ entry.id }}">Question</label>
                                            <input type="text"
                                                   width="100%"
                                                   name="question[{{ entry.id }}]"
                                                   id="question-{{ entry.id }}"
                                                   value="{{ entry.question }}"
                                                   class="text"/>
                                        </div>
                                        <div class="row">
                                            <label for="answer-{{ entry.id }}">Answer</label>
                                            <textarea
                                                    width="100%"
                                                    name="answer[{{ entry.id }}]"
                                                    id="answer-{{ entry.id }}"
                                                    class="text tinymce">{{ entry.answer }}</textarea>
                                        </div>
                                    </td>
                                    <td style="vertical-align: middle">
                                        <a href="?id={{ id }}&action=remove&remove_id={{ entry.id }}&type={{ type }}"
                                           title="Are you sure you want to remove this FAQ item?"
                                           class="alert error">
                                            <i class="fa fa-remove"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div class="row">
                        <button type="submit"
                                name="action"
                                class="btn"
                                id="faqUpdateQuestions"
                                value="update">
                            Update questions
                        </button>
                    </div>
                {% else %}
                    <p>
                        There are no FAQs added yet for this {{ type }}
                    </p>
                {% endif %}

                <fieldset class="show marginTop statusChange">
                    <h3 class="show">Add a new FAQ item</h3>
                    <div class="row">
                        <label for="new_question">
                            Question
                        </label>
                        <input type="text"
                               name="new_question"
                               id="new_question"
                               class="text"/>
                    </div>
                    <div class="row">
                        <label for="new_answer">
                            Answer
                        </label>
                        <textarea name="new_answer"
                                  id="new_answer"
                                  class="text tinymce"></textarea>
                    </div>
                    <div class="row">
                        <button type="submit"
                                name="action"
                                class="btn"
                                value="add_new">
                            Add New FAQ Item
                        </button>
                    </div>
                </fieldset>
            </form>


        {% endif %}

    </div>

{% endblock %}
