{% load spellbook_tags %}
<div class="sb-metadata sb-metadata-dev sb-rounded sb-border sb-p-3 sb-my-4 sb-bg-secondary-25 sb-w-full">
  <h3 class="sb-metadata-title sb-text-lg sb-mb-2 sb-font-bold sb-primary">Developer Metadata</h3>

  <div class="sb-metadata-grid sb-grid sb-grid-cols-1 sb-md:grid-cols-2 sb-gap-2">

    <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">Directory Path:</span>
      <code class="sb-metadata-code sb-text-sm sb-bg-secondary-10 sb-px-1 sb-py-0.5 sb-rounded sb-font-mono sb-primary">{{ directory_stats.directory_path|default:"(root)" }}</code>
    </div>

    <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">URL Pattern:</span>
      <code class="sb-metadata-code sb-text-sm sb-bg-secondary-10 sb-px-1 sb-py-0.5 sb-rounded sb-font-mono sb-primary">{{ directory_stats.url_pattern }}</code>
    </div>

    <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">View Name:</span>
      <code class="sb-metadata-code sb-text-sm sb-bg-secondary-10 sb-px-1 sb-py-0.5 sb-rounded sb-font-mono sb-primary">{{ directory_stats.view_name }}</code>
    </div>

    <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">App Namespace:</span>
      <code class="sb-metadata-code sb-text-sm sb-bg-secondary-10 sb-px-1 sb-py-0.5 sb-rounded sb-font-mono sb-primary">{{ directory_stats.namespace }}</code>
    </div>

  </div>
</div>