{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ _('Slice Helper') }}</h1>
</div>

<div class="row">
    <!-- Helper Content -->
    <div class="col-12 markdown-body p-4 bg-white rounded shadow-sm">
        {% if content_html %}
            {{ content_html|safe }}
        {% else %}
            <p class="text-muted">{{ _('Documentation not available.') }}</p>
        {% endif %}
    </div>
</div>

<style>
/* 简单的 Markdown 样式优化 */
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
}
.markdown-body h1 {
    font-size: 2em;
    padding-bottom: .3em;
    border-bottom: 1px solid #eaecef;
}
.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.markdown-body pre {
    background-color: #f6f8fa;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
}
.markdown-body code {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
}
.markdown-body table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
}
.markdown-body table th, .markdown-body table td {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}
</style>
{% endblock %}