<style>
  .manager {
    height: 10em;
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 5%;
    align-items: center;
    flex-direction: row;
  }

  .manager_table {
    text-align: center;
    flex-direction: row;
  }

  .logo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    max-width: 8em;
    filter: grayscale(0) drop-shadow(4px 4px 5px #00000049);
  }

  .m_id {
    align-items: center;
    text-align: center;
  }
</style>

<div class="manager">
  <div class="logo">
    <img src="data:image/png;base64,{{ icon }}" alt="Icon" />
  </div>
  <div class="m_id">
    <h1>BAMBOOST / {{ db_uid }}</h1>
    {% if _filter %}
    <span style="font-size: 1.2em; opacity: 0.7">filtered</span>
    {% endif %}
  </div>
  <div class="manager_table">
    <table>
      <tbody>
        <tr>
          <td>Database</td>
          <td>{{ db_path }}</td>
        </tr>
        <tr>
          <td>UID</td>
          <td>{{ db_uid }}</td>
        </tr>
        <tr>
          <td>Size</td>
          <td>{{ db_size }}</td>
        </tr>
        {% if _filter %}
        <tr>
          <td>Filter</td>
          <td>{{ _filter }}</td>
        </tr>
        {% endif %}
        {% if _sort %}
        <tr>
          <td>Sort</td>
          <td>{{ _sort }}</td>
        </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>
