<?php
/**
 * انبارداری — برچسب‌های محصول (product_tag) مانند ووکامرس.
 */
if (!defined('ABSPATH')) {
    exit;
}

$wc_ok = zerti_product_tags_available();
$can_manage = zerti_user_can_manage_product_tags();
$zerti_ui_dir = function_exists('zerti_get_text_direction') ? zerti_get_text_direction() : 'rtl';
?>
<div class="zerti-component zerti-component-inventory zerti-component-inventory-tags zerti-inventory-sub-slot"
     data-zerti-inv-active="tags"
     data-zerti-inv-component="tags">
    <?php if (!$wc_ok) : ?>
        <p class="alert alert-warning mb-0" role="status">
            <?php esc_html_e('WooCommerce must be installed and active to manage tags.', 'zerti'); ?>
        </p>
    <?php elseif (!$can_manage) : ?>
        <p class="alert alert-warning mb-0" role="status">
            <?php esc_html_e('You do not have permission to manage product tags.', 'zerti'); ?>
        </p>
    <?php else : ?>
        <div class="zerti-inv-categories zerti-inv-categories--flat" data-zerti-inv-tags="1">
            <div class="zerti-inv-categories__toolbar">
                <label class="zerti-inv-categories__search-label form-label mb-0" for="zertiInvTagsSearch">
                    <i class="fa-solid fa-magnifying-glass zerti-inv-categories__search-icon" aria-hidden="true"></i>
                    <input
                        type="search"
                        id="zertiInvTagsSearch"
                        class="form-control form-control-sm zerti-inv-categories__search-input"
                        autocomplete="off"
                        dir="<?php echo esc_attr($zerti_ui_dir); ?>"
                        aria-label="<?php esc_attr_e('Search tags', 'zerti'); ?>"
                        placeholder="<?php esc_attr_e('Search items', 'zerti'); ?>"
                    >
                </label>
            </div>

            <div class="zerti-inv-categories__layout">
                <aside class="zerti-inv-categories__tree-panel card" aria-label="<?php esc_attr_e('Tags list', 'zerti'); ?>">
                    <div class="card-body p-0 d-flex flex-column min-h-0">
                        <div class="zerti-inv-categories__tree-scroll zerti-scrollbar-thin" dir="<?php echo esc_attr($zerti_ui_dir); ?>">
                            <div class="zerti-inv-categories__tree-scroll-inner">
                                <div class="zerti-inv-categories__tree-loading d-none" role="status">
                                    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                                    <span><?php esc_html_e('Loading…', 'zerti'); ?></span>
                                </div>
                                <div class="zerti-inv-categories__tree-empty text-body-secondary small p-3 d-none" role="status">
                                    <?php esc_html_e('Nothing found. Click «Add tag» to create a new item.', 'zerti'); ?>
                                </div>
                                <ul class="zerti-inv-categories__tree list-unstyled mb-0" role="list"></ul>
                            </div>
                        </div>
                    </div>
                </aside>

                <section
                    class="zerti-inv-categories__editor card"
                    aria-label="<?php esc_attr_e('Edit tag', 'zerti'); ?>"
                    data-zerti-editor-expanded="1"
                >
                    <div class="zerti-inv-categories__editor-bar">
                        <p class="mb-0 small text-body-secondary zerti-inv-categories__editor-bar-title">
                            <?php esc_html_e('Click to create a new tag', 'zerti'); ?>
                        </p>
                        <button type="button" class="btn btn-sm btn-primary zerti-inv-categories__add-btn">
                            <i class="fa-solid fa-plus ms-1" aria-hidden="true"></i>
                            <?php esc_html_e('Add tag', 'zerti'); ?>
                        </button>
                        <div class="zerti-inv-categories__editor-bar-actions d-flex flex-wrap align-items-center gap-2 ms-auto">
                            <button type="button" class="btn btn-sm btn-outline-secondary zerti-inv-categories__cancel-edit-btn d-none">
                                <?php esc_html_e('Cancel editing', 'zerti'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="zerti-inv-categories__editor-body">
                        <div class="zerti-inv-categories__editor-scroll" dir="<?php echo esc_attr($zerti_ui_dir); ?>">
                        <div class="zerti-inv-categories__editor-scroll-inner">
                        <div class="card-body pt-0">
                        <form class="zerti-inv-categories__form d-none" novalidate>
                            <input type="hidden" name="id" value="0" data-zerti-field="id">

                            <div class="alert alert-danger py-2 small d-none zerti-inv-categories__form-error" role="alert"></div>
                            <div class="alert alert-success py-2 small d-none zerti-inv-categories__form-success" role="status"></div>

                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="zertiTagName"><?php esc_html_e('Name', 'zerti'); ?> <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm" id="zertiTagName" name="name" data-zerti-field="name" required>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="zertiTagSlug"><?php esc_html_e('Slug', 'zerti'); ?></label>
                                    <input type="text" class="form-control form-control-sm" id="zertiTagSlug" name="slug" data-zerti-field="slug" dir="ltr">
                                </div>
                                <div class="col-12">
                                    <label class="form-label" for="zertiTagDescription"><?php esc_html_e('Description', 'zerti'); ?></label>
                                    <textarea class="form-control form-control-sm" id="zertiTagDescription" name="description" rows="3" data-zerti-field="description"></textarea>
                                </div>
                            </div>

                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-4 pt-3 border-top">
                                <p class="text-body-secondary small mb-0 zerti-inv-categories__meta-line d-none"></p>
                                <div class="d-flex gap-2 ms-auto">
                                    <button type="button" class="btn btn-sm btn-outline-secondary zerti-inv-categories__cancel-btn">
                                        <?php esc_html_e('Cancel', 'zerti'); ?>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger zerti-inv-categories__delete-btn d-none">
                                        <?php esc_html_e('Delete', 'zerti'); ?>
                                    </button>
                                    <button type="submit" class="btn btn-sm btn-primary zerti-inv-categories__save-btn">
                                        <?php esc_html_e('Save', 'zerti'); ?>
                                    </button>
                                </div>
                            </div>
                        </form>
                        </div>
                        </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    <?php endif; ?>
</div>
