@{
    ViewData["Title"] = "Help Drawer Test";
}

<div class="page-heading">
    <div>
        <p class="eyebrow">Developer validation</p>
        <h1>Help Drawer Test</h1>
        <p class="lead-text">Temporary controls for testing the contextual help drawer.</p>
    </div>
</div>

<section class="plain-card">
    <h2>Drawer controls</h2>
    <div class="button-row">
        <button class="btn btn-primary" type="button" data-help-open="timeline.plotLines">Open Plot Lines help</button>
        <button class="btn btn-outline-secondary" type="button" data-help-open="missing.example">Open missing help</button>
        <help-icon key="timeline.plotLines" />
    </div>
    <p class="muted mt-3">Use the drawer splitter to resize it, then reload this page to confirm the width is restored. Pin the drawer and navigate to another page to confirm it reopens.</p>
</section>