{% extends 'page-base.twig' %}
{% block content %}


    <div class="wrap mb-4 bg-white/90 border-gray-200 rounded-lg w-full md:w-2/4 px-6 py-3">
        <h1 class="!p-0 mb-2 !font-[600]">Sync Settings</h1>
        <hr class="my-3"/>
        <div class="w-full mb-4">
            <label class="text-sm font-medium text-gray-900 dark:text-white mb-2 block">Enable Sync Metabox for Post
                Types</label>
            <div class="max-h-60 overflow-auto bg-gray-50 border border-gray-200 rounded-lg p-4 dark:bg-gray-700 dark:border-gray-600">
                {% for post_type in post_types %}
                    <div class="flex items-center">
                        <input id="{{ post_type }}" name="{{ post_type }}" type="checkbox"
                               class="post-type-checkbox focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
                               {% if post_type in enabled_post_types %}checked{% endif %}>
                        <label for="{{ post_type }}" class="ml-2 block text-sm text-gray-900 dark:text-white">
                            {{ post_type }}
                        </label>
                    </div>
                {% endfor %}
            </div>
        </div>

        <!-- Add this code above the dual select box -->
        <div class="mb-6">
            <label for="post-type-select" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select
                Post Type</label>
            <select id="post-type-select"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                {% for post_type in post_types %}
                    <option value="{{ post_type }}">{{ post_type }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="container my-10">
            <div class="flex justify-between items-center w-full">
                <div class="w-1/3">
                    <label for="left-select" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Meta
                        fields for post type</label>
                    <select id="left-select" size="5" multiple
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">

                    </select>
                </div>
                <div class="flex flex-col items-center justify-center px-4">
                    <button id="move-to-right" class="py-1 px-3 mb-2 bg-blue-500 text-white text-sm rounded-lg">→
                    </button>
                    <button id="move-to-left" class="py-1 px-3 bg-blue-500 text-white text-sm rounded-lg">←</button>
                </div>
                <div class="w-1/3">
                    <label for="right-select" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Excluded
                        from sync</label>
                    <select id="right-select" size="5" multiple
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </select>
                </div>
            </div>
        </div>

        <div>
            <label class="relative inline-flex items-center cursor-pointer">
                <input id="sync-metadata-checkbox" type="checkbox" value=""
                       class="sr-only peer" {{ sync_metadata ? 'checked' : '' }}>
                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Sync metadata</span>
            </label>
        </div>
        <div class="mt-4">
            <label class="relative inline-flex items-center cursor-pointer">
                <input id="sync-taxonomies-checkbox" type="checkbox" value=""
                       class="sr-only peer" {{ sync_taxonomies ? 'checked' : '' }}>
                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Sync taxonomies</span>
            </label>
        </div>
        <button data-modal-target="popup-modal" data-modal-toggle="popup-modal" type="button"
                id="save-settings-btn"
                class="text-white bg-[#2557D6] hover:bg-[#2557D6]/90 focus:ring-4 focus:ring-[#2557D6]/50 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#2557D6]/50 mr-2 mb-2 mt-4">
            <svg class="h-4 mr-2 -ml-1 w-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                <path d="M433.1 129.1l-83.9-83.9C342.3 38.32 327.1 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 152.9 441.7 137.7 433.1 129.1zM224 416c-35.34 0-64-28.66-64-64s28.66-64 64-64s64 28.66 64 64S259.3 416 224 416zM320 208C320 216.8 312.8 224 304 224h-224C71.16 224 64 216.8 64 208v-96C64 103.2 71.16 96 80 96h224C312.8 96 320 103.2 320 112V208z"/>
            </svg>
            Save settings
        </button>
    </div>

    <div id="success-notification"
         class="hidden inline-block bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative"
         role="alert">
        <strong class="font-bold">Success!</strong>
        <span class="block sm:inline">The settings have been saved successfully.</span>
    </div>

    <div class="relative z-10 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true" id="modal">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="fixed inset-0 z-10 overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">

                <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                    <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                                <svg class="h-6 w-6 text-blue-500" fill="none" stroke="currentColor" stroke-width="1.5"
                                     viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"></path>
                                </svg>

                            </div>

                            <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                                <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Save
                                    settings</h3>
                                <div class="mt-2">
                                    <p class="text-sm text-gray-500">Do you want to re-sync old posts with the new
                                        settings?</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 sm:space-x-reverse sm:space-x-3">
                        <button id="no-re-sync-btn" type="button"
                                class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">
                            No, save settings without re-syncing
                        </button>
                        <button id="re-sync-btn" type="button"
                                class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 sm:w-auto">
                            Yes, re-sync previously synced posts
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}