{% load i18n %}

<style>
.seo-toolkit-info-panel {
    border: 1px solid var(--w-color-border-info, #bae6fd);
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
}

.seo-toolkit-info-header {
    background: linear-gradient(135deg, #007d7e 0%, #0f766e 100%);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-toolkit-info-header svg {
    width: 20px;
    height: 20px;
    color: white;
    flex-shrink: 0;
}

.seo-toolkit-info-header h4 {
    margin: 0;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.seo-toolkit-info-body {
    padding: 1rem;
}

.seo-toolkit-info-body p {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--w-color-text-meta, #666);
    line-height: 1.5;
}

.seo-toolkit-button-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.seo-toolkit-button-group .button {
    margin: 0;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.15s ease;
}

.seo-toolkit-button-group .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 125, 126, 0.2);
}

.seo-toolkit-button-group .button svg {
    width: 16px;
    height: 16px;
}
</style>

<div class="seo-toolkit-info-panel">
    <div class="seo-toolkit-info-header">
        <svg class="icon icon-edit" aria-hidden="true"><use href="#icon-edit"></use></svg>
        <h4>{% trans "Advanced SEO Metadata Editor" %}</h4>
    </div>
    <div class="seo-toolkit-info-body">
        <p>{% trans "Use the Wagtail SEO Toolkit bulk editor to optimize metadata with smart placeholders and live validation:" %}</p>
        <div class="seo-toolkit-button-group">
            <a class='button button-secondary' href='{% url 'bulk_edit_action' %}?action=edit_title&page_ids=' data-page-link="edit_title">
                <svg class="icon icon-edit" aria-hidden="true"><use href="#icon-edit"></use></svg>
                {% trans "Edit Title" %}
            </a>
            <a class='button button-secondary' href='{% url 'bulk_edit_action' %}?action=edit_description&page_ids=' data-page-link="edit_description">
                <svg class="icon icon-doc-full" aria-hidden="true"><use href="#icon-doc-full"></use></svg>
                {% trans "Edit Description" %}
            </a>
        </div>
    </div>
</div>

<script>
(function() {
    // Extract page ID from the form action URL
    const form = document.getElementById('page-edit-form');
    if (form) {
        const actionUrl = form.getAttribute('action');
        // Match pattern like /admin/pages/60/edit/
        const match = actionUrl.match(/\/pages\/(\d+)\//);
        if (match && match[1]) {
            const pageId = match[1];
            // Update all links with data-page-link attribute
            document.querySelectorAll('[data-page-link]').forEach(function(link) {
                const currentHref = link.getAttribute('href');
                link.setAttribute('href', currentHref + pageId);
            });
        }
    }
})();
</script>