<div class="d-grid gap-2">
  {% include "components/alert.html" with status="success" text="Your profile was saved." %}
  {% include "components/alert.html" with status="info" text="This table is a draft; only you can see it." %}
  {% include "components/alert.html" with status="warning" text="The metadata does not name a license yet." %}
  {% include "components/alert.html" with status="danger" text="The upload failed in line 12, column 3." dismissible=True %}
</div>

<p class="d-flex flex-wrap gap-2 align-items-center mb-0">
  <span class="badge badge--success">Published</span>
  <span class="badge badge--warning">Draft</span>
  <span class="badge badge--info">Early Access</span>
  <span class="badge badge--danger">Embargoed</span>
  <span class="badge badge--neutral">12</span>
</p>

<div class="d-flex flex-wrap gap-2 align-items-center mb-3">
  <button type="button" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn btn-secondary">Cancel</button>
  <button type="button" class="btn btn-outline-danger">Delete…</button>
  <button type="button" class="btn btn-danger">Delete table</button>
  <button type="button" class="btn btn-link">Show details</button>
</div>
<div class="d-flex flex-wrap gap-2 align-items-center mb-3">
  <button type="button" class="btn btn-primary btn-sm">Small primary</button>
  <button type="button"
          class="btn btn-secondary btn-sm">Small secondary</button>
  <button type="button"
          class="btn btn-outline-danger btn-sm">Small danger</button>
  <button type="button" class="btn btn-link btn-sm">Small link</button>
</div>
<div class="d-flex flex-wrap gap-2 align-items-center mb-3">
  <button type="button"
          class="btn btn-primary"
          disabled>Disabled primary</button>
  <button type="button"
          class="btn btn-secondary"
          disabled>Disabled secondary</button>
  <a class="btn btn-secondary disabled"
     aria-disabled="true">Disabled link button</a>
  <button type="button" class="btn btn-primary">
    <span class="btn__icon fas fa-plus" aria-hidden="true"></span>With an icon
  </button>
</div>
<div class="d-flex flex-wrap gap-2 align-items-center p-3 rounded"
     style="background-color: var(--oep-surface-strong)">
  <a class="btn btn-on-strong btn-sm" href="#">Sign up</a>
  <a class="btn btn-on-strong" href="#">On a blue band</a>
</div>

<div class="row g-3">
  <div class="col-12 col-md-6">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="card-title">A plain card</h3>
        <p class="card-text">
          Holds what belongs together: a title, a sentence or two, and the links of its own.
        </p>
        <a href="#card">A link of its own</a>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-6">
    <div class="card card--clickable h-100">
      <div class="card-body">
        <h3 class="card-title">
          <a class="stretched-link"
             href="{% url 'dataedit:topic-list' %}">A clickable card</a>
        </h3>
        <p class="card-text">The whole card opens the page its title names.</p>
      </div>
    </div>
  </div>
</div>

<div class="d-grid gap-4">
  {% include "components/confirm_dialog.html" with as_example=True title="Publish table?" text="Everyone can then find and read the table." verb="Publish" %}
  {% include "components/confirm_dialog.html" with as_example=True title="Remove member?" text="Ada Lovelace leaves Grid research and loses every permission the organization gave her." verb="Remove member" danger=True %}
  {% include "components/confirm_dialog.html" with as_example=True title="Delete table?" text="The table, its data and its metadata are deleted. This cannot be undone." verb="Delete table" danger=True typed="wind_farms" %}
  <div class="d-flex flex-wrap gap-2">
    <button type="button"
            class="btn btn-secondary"
            data-confirm="Everyone can then find and read the table."
            data-confirm-title="Publish table?"
            data-confirm-verb="Publish">Try plain</button>
    <button type="button"
            class="btn btn-outline-danger"
            data-confirm="Ada Lovelace leaves Grid research and loses every permission the organization gave her."
            data-confirm-title="Remove member?"
            data-confirm-verb="Remove member"
            data-confirm-danger>Try danger</button>
    <button type="button"
            class="btn btn-outline-danger"
            data-confirm="The table, its data and its metadata are deleted. This cannot be undone."
            data-confirm-title="Delete table?"
            data-confirm-verb="Delete table"
            data-confirm-danger
            data-confirm-typed="wind_farms">Try typed</button>
  </div>
</div>

<div class="d-flex flex-wrap gap-4 align-items-start">
  <div class="dropdown">
    <button class="btn btn-link dropdown-toggle"
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="false">Metadata options</button>
    <ul class="dropdown-menu">
      <li>
        <h6 class="dropdown-header">Download</h6>
      </li>
      <li>
        <a class="dropdown-item" href="#dropdown">JSON</a>
      </li>
      <li>
        <a class="dropdown-item" href="#dropdown">Open the metadata API page</a>
      </li>
      <li>
        <hr class="dropdown-divider" />
      </li>
      <li>
        <a class="dropdown-item" href="#dropdown">Edit</a>
      </li>
    </ul>
  </div>
  <ul class="dropdown-menu d-block position-static"
      aria-label="The same menu, shown open">
    <li>
      <h6 class="dropdown-header">Download</h6>
    </li>
    <li>
      <a class="dropdown-item" href="#dropdown">JSON</a>
    </li>
    <li>
      <a class="dropdown-item" href="#dropdown">Open the metadata API page</a>
    </li>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li>
      <a class="dropdown-item" href="#dropdown">Edit</a>
    </li>
  </ul>
</div>

{% load static %}
{% include "components/empty_state.html" with icon="fas fa-layer-group" title="You have no datasets yet" text="A dataset collects tables under one title." action_template="styleguide/entries/_empty_state_action.html" %}
<div class="card">
  <div class="card-body">
    {% include "components/empty_state.html" with icon="fas fa-table" text="No tables are assigned yet." compact=True %}
  </div>
</div>
{% static 'img/OpenEnergyFamily_OEPlatypus.png' as platypus %}
{% include "components/empty_state.html" with image=platypus image_alt="OEPlatypus" heading=True as_example=True title="This page could not be found!" text="It might be an old link or maybe the data moved." %}

<div class="row g-4">
  <div class="col-md-6">
    <div class="mb-3">
      <label class="form-label" for="field-name">Table name</label>
      <input class="form-control"
             type="text"
             id="field-name"
             placeholder="e.g. wind_farms_2024"
             aria-describedby="field-name-help" />
      <div class="form-text"
           id="field-name-help">Lower case letters, digits and underscores.</div>
    </div>
    <div class="mb-3">
      <label class="form-label" for="field-email">E-Mail</label>
      <input class="form-control is-invalid"
             type="email"
             id="field-email"
             value="not-an-address"
             aria-describedby="field-email-error" />
      <div class="invalid-feedback"
           id="field-email-error">Enter a valid email address.</div>
    </div>
    <div class="mb-3">
      <label class="form-label" for="field-description">Description</label>
      <textarea class="form-control" id="field-description" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <label class="form-label" for="field-disabled">Current address</label>
      <input class="form-control"
             type="email"
             id="field-disabled"
             value="owner@example.org"
             disabled />
    </div>
  </div>
  <div class="col-md-6">
    <div class="mb-3" style="max-width: 12rem">
      <label class="form-label" for="field-narrow">The license under which the data of this table is published</label>
      <select class="form-select" id="field-narrow">
        <option>Creative Commons Attribution 4.0 International</option>
        <option>Open Data Commons Open Database License</option>
      </select>
    </div>
    <div class="mb-3">
      <label class="form-label" for="field-small">Rows per page</label>
      <select class="form-select form-select-sm" id="field-small">
        <option>25</option>
        <option>100</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input"
             type="checkbox"
             id="field-check"
             checked />
      <label class="form-check-label"
             for="field-check">Notify me about reviews</label>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input"
             type="radio"
             name="field-radio"
             id="field-radio" />
      <label class="form-check-label" for="field-radio">Only this table</label>
    </div>
  </div>
</div>

<p>
  Methodical focus
  {% include "components/field_help.html" with label="Methodical focus" text="The one to three areas the model concentrates on." %}
</p>

<a class="link-with-arrow" href="{% url 'dataedit:topic-list' %}">
  Explore the database
  {% include "icons/arrow_right.html" %}
</a>

<div class="d-grid gap-3">
  {% include "components/page_header.html" with area="About" icon="icons/area_about.html" crumb_label="Overview" crumb_url="#page_header" title="Open Energy Family Steering Committee" as_example=True %}
  {% include "components/page_header.html" with area="Account" icon="icons/area_account.html" crumb_label="Dashboard" crumb_url="#page_header" crumb2_label="Settings" crumb2_url="#page_header" title="Update account profile" description="One muted line, when the page has one." actions="styleguide/entries/_page_header_actions.html" as_example=True %}
  {% include "components/page_header.html" with area="Dashboard" icon="icons/area_dashboard.html" title="A user's name" tabs="styleguide/entries/_page_header_tabs.html" as_example=True %}
</div>

<nav aria-label="Pages">
  <ul class="pagination mb-0">
    <li class="page-item disabled">
      <span class="page-link" aria-hidden="true">‹</span>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="#pagination" aria-label="Page 2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#pagination" aria-label="Page 3">3</a>
    </li>
    <li class="page-item disabled">
      <span class="page-link" aria-hidden="true">…</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="#pagination" aria-label="Page 83">83</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#pagination" aria-label="Next page">›</a>
    </li>
    <li class="pagination__range">1–25 of 2,068</li>
  </ul>
</nav>

{% include "components/section_card.html" with id="section-card-example" title="General information" body="styleguide/entries/_section_card_body.html" %}

<h2>Sources and licences</h2>
<p>
  Body text is 1rem. A section heading gets 2.5rem above and 0.75rem below, a
  subsection 1.75rem and 0.5rem.
</p>
<h3>Licence of the data</h3>
<p>Headings take the heading colour and weight from tokens.</p>
<h4>A minor heading</h4>
<p class="mb-0">An h4 gets 1.25rem above; it is smaller than an h3.</p>

<div class="d-grid gap-3">
  <div class="table-container">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Table</th>
          <th scope="col">Topic</th>
          <th scope="col">Rows</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="#table">wind_farm_capacity</a></td>
          <td>Energy supply</td>
          <td>4</td>
        </tr>
        <tr>
          <td><a href="#table">heat_demand_2030</a></td>
          <td>Demand</td>
          <td>8,760</td>
        </tr>
        <tr>
          <td><a href="#table">grid_nodes</a></td>
          <td>Grid</td>
          <td>1,204</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="table-container">
    <table class="table table-pairs">
      <tbody>
        <tr>
          <th scope="row">Finished</th>
          <td>2026-10-12</td>
        </tr>
        <tr>
          <th scope="row">Reviewer</th>
          <td>A reviewer</td>
        </tr>
        <tr>
          <th scope="row">Badge</th>
          <td>Gold</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<nav class="nav tabs mb-4" aria-label="Tabs without an aside link">
  <a class="nav-link active"
     aria-current="page"
     href="#tabs"><i class="fas fa-table" aria-hidden="true"></i> Tables</a>
  <a class="nav-link"
     href="#tabs"><i class="fas fa-database"
   aria-hidden="true"></i> Datasets</a>
  <a class="nav-link"
     href="#tabs">Reviews <span class="badge badge--info">Early Access</span></a>
  <a class="nav-link" href="#tabs">Organizations</a>
</nav>
<nav class="nav tabs" aria-label="Tabs with an aside link">
  <a class="nav-link"
     href="#tabs"><i class="fas fa-table"
   aria-hidden="true"></i> Tables</a>
  <a class="nav-link active"
     aria-current="page"
     href="#tabs"><i class="fas fa-database" aria-hidden="true"></i> Datasets</a>
  <a class="nav-link" href="#tabs">Reviews</a>
  <a class="nav-link" href="#tabs">Organizations</a>
  <a class="tabs__aside"
     href="#tabs"
     aria-label="Settings"
     title="Settings"><i class="fas fa-cog" aria-hidden="true"></i></a>
</nav>

<div class="tag-group">
  {% include "components/tag.html" with name="Wind" color="#2e7d32" %}
  {% include "components/tag.html" with name="Electricity" color="#f9a825" href="?tags=electricity" title="Filter by Electricity" %}
  {% include "components/tag.html" with name="Heat" color="#6a1b9a" remove="heat" %}
  {% include "components/tag.html" with name="Hydrogen" color="#00838f" toggle_name="catalogue_tags" toggle_value="hydrogen" checked=True %}
  {% include "components/tag.html" with name="Mobility" color="#ad1457" toggle_name="catalogue_tags" toggle_value="mobility" %}
  {% include "components/tag.html" with name="A topic, no colour" %}
</div>

<div class="d-grid gap-2 justify-content-start">
  {% include "components/toast.html" with status="success" text="Your profile was saved." %}
  {% include "components/toast.html" with status="info" text="The review was saved as a draft." %}
  {% include "components/toast.html" with status="warning" title="Not published" text="The metadata does not name a license yet." %}
  {% include "components/toast.html" with status="danger" title="Delete failed" text="The table could not be deleted. Try again later." %}
</div>

<div class="toc-layout">
  {% include "components/toc.html" with entries="styleguide/entries/_toc_entries.html" %}
  <div class="toc-layout__body">
    <h3 id="toc-example-first">A first section</h3>
    <p>
      Running text, as wide as the reading measure. The list beside it repeats
      this page's headings word for word.
    </p>
    <h3 id="toc-example-second">A second section with a longer heading that wraps</h3>
    <p>A long entry wraps inside its column.</p>
  </div>
</div>

<div class="d-flex flex-column gap-3">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary index-navbar"
       aria-label="Signed in">
    <div class="container-fluid">
      {% include "components/user_menu.html" with user=example_user id="catalogueUserMenu" %}
    </div>
  </nav>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary index-navbar"
       aria-label="Signed out">
    <div class="container-fluid">
      {% include "components/user_menu.html" with user=None %}
    </div>
  </nav>
</div>