<% layout('layouts/boilerplate') %>
    <!-- <script src="https://cdn.tiny.cloud/1/9rpfmnglpt10wzitgh0d0zn5ru3343oti9q4hfwl9of7mwpu/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="/admin/faq" class="link-dark">Manage FAQ</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                <%= faq.question %>
            </li>
        </ol>
    </nav>
    <div class="card shadow py-3 px-3 mb-3">
        <form action="/admin/faq/<%= faq._id %>" method="POST">
            <div class="card-body">
                <div class="mb-3">
                    <div class="row">
                        <div class="col">
                            <label for="faqQuestion">Question</label>
                            <input type="text" id="faqQuestion" name="question" class="form-control" value="<%= faq.question %>">
                        </div>
                        <div class="col-3">
                            <div class="form-check form-switch mt-4">
                                <label for="eventAllowBookings">Display FAQ</label>
                                <input class="form-check-input" type="checkbox" role="switch" name="display" id="faqDisplay" <%=( faq.display ? 'checked' : '') %>>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="faqAnswer">Answer</label>
                    <textarea name="answer" class="form-control" id="faqAnswer" cols="30" rows="10"><%= faq.answer %></textarea>
                </div>
                <div class="mb-3">
                    <button class="btn btn-success">
                    Save
                </button>
                    <a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete FAQ</a>
                </div>
            </div>
        </form>
    </div>
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="deleteModalLabel">Delete FAQ?</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this FAQ?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <form action="/admin/faq/<%= faq._id %>?_method=DELETE" method="POST">
                        <button type="submit" class="btn btn-danger">Delete FAQ</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <script src="/js/adminAbout.js"></script>