function/templates/dashboard/http_functions/header.html

<div class="">

  <!-- Tabs and Actions -->
  <div class="border-b border-gray-200 dark:border-gray-800 flex justify-between items-end">
    <nav class="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
      {% if show_edit_form|default(false, true) %}
      <a href="#" hx-get="{{ edit_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
                      {% if active_tab == 'edit' %}
                        border-blue-500 text-blue-600 dark:text-blue-400
                      {% else %}
                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
                      {% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
        </svg>
        Editor
      </a>
      {% endif %}

      {% if show_logs|default(false, true) %}
      <a href="#" hx-get="{{ logs_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
                      {% if active_tab == 'logs' %}
                        border-blue-500 text-blue-600 dark:text-blue-400
                      {% else %}
                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
                      {% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
        Logs
      </a>
      {% endif %}

      {% if show_client|default(false, true) %}
      <a href="#" hx-get="{{ url_for('http.client', function_id=function_id) }}" hx-target="#container"
        hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
                      {% if active_tab == 'client' %}
                        border-blue-500 text-blue-600 dark:text-blue-400
                      {% else %}
                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
                      {% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
        </svg>
        Client
      </a>
      {% endif %}

      {% if show_history|default(false, true) %}
      <a href="#" hx-get="{{ history_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
                      {% if active_tab == 'history' %}
                        border-blue-500 text-blue-600 dark:text-blue-400
                      {% else %}
                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
                      {% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0 1 18 0Z" />
        </svg>
        History
      </a>
      {% endif %}

      {% if show_tests|default(false, true) %}
      <a href="#" hx-get="{{ tests_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
                      {% if active_tab == 'tests' %}
                        border-blue-500 text-blue-600 dark:text-blue-400
                      {% else %}
                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
                      {% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0 1 18 0z" />
        </svg>
        Tests
      </a>
      {% endif %}

      {% if show_new|default(false, true) %}
      <a href="#" hx-get="{{ new_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
                      {% if active_tab == 'new' %}
                        border-blue-500 text-blue-600 dark:text-blue-400
                      {% else %}
                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
                      {% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
        New Function
      </a>
      {% endif %}
    </nav>

    <div class="pb-2">
      <button hx-get="{{ cancel_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
        class="inline-flex items-center justify-center px-3 py-1.5 border border-gray-300 dark:border-gray-700 shadow-sm text-xs font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1.5 text-gray-500 dark:text-gray-400" fill="none"
          viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        Back
      </button>
    </div>
  </div>
</div>