{{define "content"}}
<div class="mb-6">
  <a href="/dashboard" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700">
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
    </svg>
    Back to Dashboard
  </a>
</div>

<!-- App Header -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
  <div class="flex items-start justify-between">
    <div class="flex items-center space-x-4">
      <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center">
        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
        </svg>
      </div>
      <div>
        <h1 class="text-2xl font-bold text-gray-900">{{.App.Name}}</h1>
        <p class="text-gray-500">{{.App.PackageID}}</p>
        <div class="mt-2">
          {{if eq .App.Status "published"}}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
            <span class="w-1.5 h-1.5 mr-1.5 bg-green-400 rounded-full"></span>
            Published
          </span>
          {{else if eq .App.Status "draft"}}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
            <span class="w-1.5 h-1.5 mr-1.5 bg-gray-400 rounded-full"></span>
            Draft
          </span>
          {{else if eq .App.Status "review"}}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
            <span class="w-1.5 h-1.5 mr-1.5 bg-yellow-400 rounded-full"></span>
            In Review
          </span>
          {{end}}
        </div>
      </div>
    </div>
    <a href="/apps/{{.App.ID}}/versions/new" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
      </svg>
      Submit New Version
    </a>
  </div>
</div>

<!-- Tabs -->
<div class="border-b border-gray-200 mb-6">
  <nav class="-mb-px flex space-x-8">
    <a href="/apps/{{.App.ID}}" class="{{if eq .Tab "overview"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
      Overview
    </a>
    <a href="/apps/{{.App.ID}}/versions" class="{{if eq .Tab "versions"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
      Versions
    </a>
    <a href="/apps/{{.App.ID}}/analytics" class="{{if eq .Tab "analytics"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
      Analytics
    </a>
    <a href="/apps/{{.App.ID}}/settings" class="{{if eq .Tab "settings"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
      Settings
    </a>
  </nav>
</div>

<!-- Tab Content -->
{{block "tab_content" .}}
<!-- Overview Tab (default) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <!-- Left Column -->
  <div class="lg:col-span-2 space-y-6">
    <!-- Latest Version -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Latest Version</h2>
      {{if .LatestVersion}}
      <div class="flex items-center justify-between">
        <div>
          <p class="text-2xl font-bold text-gray-900">{{.LatestVersion.VersionName}}</p>
          <p class="text-sm text-gray-500">Version code: {{.LatestVersion.VersionCode}}</p>
        </div>
        <div class="text-right">
          {{if .LatestVersion.PublishedAt}}
          <p class="text-sm text-gray-500">Published</p>
          <p class="text-sm text-gray-700">{{.LatestVersion.PublishedAt.Format "Jan 2, 2006"}}</p>
          {{else}}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
            {{.LatestVersion.Status}}
          </span>
          {{end}}
        </div>
      </div>
      {{else}}
      <p class="text-gray-500">No versions uploaded yet.</p>
      <a href="/apps/{{.App.ID}}/versions/new" class="inline-flex items-center mt-4 text-indigo-600 hover:text-indigo-700">
        Upload your first version
        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </a>
      {{end}}
    </div>

    <!-- Description -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Description</h2>
      {{if .App.Description}}
      <p class="text-gray-700">{{.App.Description}}</p>
      {{else}}
      <p class="text-gray-500">No description provided.</p>
      {{end}}
    </div>
  </div>

  <!-- Right Column -->
  <div class="space-y-6">
    <!-- Quick Stats -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Statistics</h2>
      <dl class="space-y-4">
        <div class="flex justify-between">
          <dt class="text-sm text-gray-500">Downloads</dt>
          <dd class="text-sm font-medium text-gray-900">0</dd>
        </div>
        <div class="flex justify-between">
          <dt class="text-sm text-gray-500">Active Users</dt>
          <dd class="text-sm font-medium text-gray-900">0</dd>
        </div>
        <div class="flex justify-between">
          <dt class="text-sm text-gray-500">Total Versions</dt>
          <dd class="text-sm font-medium text-gray-900">{{.TotalVersions}}</dd>
        </div>
      </dl>
    </div>

    <!-- App Info -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Information</h2>
      <dl class="space-y-4">
        {{if .App.Category}}
        <div class="flex justify-between">
          <dt class="text-sm text-gray-500">Category</dt>
          <dd class="text-sm font-medium text-gray-900">{{.App.Category}}</dd>
        </div>
        {{end}}
        <div class="flex justify-between">
          <dt class="text-sm text-gray-500">Created</dt>
          <dd class="text-sm font-medium text-gray-900">{{.App.CreatedAt.Format "Jan 2, 2006"}}</dd>
        </div>
        <div class="flex justify-between">
          <dt class="text-sm text-gray-500">Updated</dt>
          <dd class="text-sm font-medium text-gray-900">{{.App.UpdatedAt.Format "Jan 2, 2006"}}</dd>
        </div>
      </dl>
    </div>
  </div>
</div>
{{end}}
{{end}}