<div class="container">
  <ul class="nav nav-tabs">
  <li class="nav-item {{ 'active' if data.component == 'connections' }}"><a class="nav-link" hx-get="{{ url_for('AstroMigration.tabs_conns') }}">Connections</a></li>
  <li class="nav-item {{ 'active' if data.component == 'variables' }}"><a class="nav-link" hx-get="{{ url_for('AstroMigration.tabs_vars') }}">Variables</a></li>
  <li class="nav-item {{ 'active' if data.component == 'env' }}"><a class="nav-link" hx-get="{{ url_for('AstroMigration.tabs_env') }}">Environment Variables</a></li>
  <li class="nav-item {{ 'active' if data.component == 'dags' }}"><a class="nav-link" hx-get="{{ url_for('AstroMigration.tabs_dags') }}">DAGs cutover</a></li>
</ul>
</div>
<div class="tab-content">
  <div class="container">
  {% block body %}
  <!-- Tab content goes here -->
  {% endblock %}
  </div>
</div>
