<!-- Content Details Card -->
<div class="card">
  <div class="card-body">
    <div class="border-b border-neutral-200 pb-4 mb-6">
      <h3 class="text-h3 text-neutral-900">Details</h3>
    </div>
    
    <dl class="space-y-6">
      <!-- Name -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <dt class="text-body font-medium text-neutral-700">Name</dt>
        <dd class="text-body text-neutral-900 sm:col-span-2">
          <%= content.name %>
        </dd>
      </div>
      
      <!-- Duration -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <dt class="text-body font-medium text-neutral-700">Duration</dt>
        <dd class="text-body text-neutral-900 sm:col-span-2">
          <% if content.duration.nil? %>
            <span class="text-neutral-500">N/A, using default</span>
          <% else %>
            <%= content.duration %> seconds
          <% end %>
        </dd>
      </div>
      
      <!-- Schedule -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <dt class="text-body font-medium text-neutral-700">Schedule</dt>
        <dd class="text-body text-neutral-900 sm:col-span-2">
          <div class="space-y-2">
            <div class="font-medium text-neutral-900">
              <%= schedule_summary(content) %>
            </div>
            <div class="space-y-1 text-caption text-neutral-700 pl-4">
              <div>
                <span class="font-medium">Start:</span>
                <%= content.start_time || "N/A" %>
              </div>
              <div>
                <span class="font-medium">End:</span>
                <%= content.end_time || "N/A" %>
              </div>
            </div>
          </div>
        </dd>
      </div>
      
      <!-- Feeds -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <dt class="text-body font-medium text-neutral-700">Feeds</dt>
        <dd class="text-body text-neutral-900 sm:col-span-2">
          <% visible = SubmissionPolicy.visible_submissions(current_user, content) %>
          <% if visible.any? %>
            <ul class="space-y-3">
              <% visible.each do |submission| %>
                <li data-controller="toggle">
                  <div class="flex items-center gap-2 flex-wrap">
                    <%= link_to submission.feed.name, submission.feed,
                        class: "text-brand hover:text-brand-600 font-medium transition-colors duration-200" %>
                    <%= moderation_status_badge(submission) %>
                    <% if policy(submission).moderate? %>
                      <button type="button"
                              data-action="toggle#toggle"
                              class="text-xs text-neutral-500 hover:text-neutral-700 underline">
                        Change
                      </button>
                    <% end %>
                  </div>
                  <% if submission.moderation_reason.present? && policy(submission).show_reason? %>
                    <p class="text-caption text-neutral-600 mt-1 pl-2 border-l-2 border-neutral-300"><%= submission.moderation_reason %></p>
                  <% end %>
                  <% if policy(submission).moderate? %>
                    <div data-toggle-target="content" class="hidden mt-2 max-w-sm">
                      <%= render "submissions/moderation_actions", submission: submission %>
                    </div>
                  <% end %>
                </li>
              <% end %>
            </ul>
          <% else %>
            <span class="text-neutral-500 italic">Not approved on any feeds</span>
          <% end %>
        </dd>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <dt class="text-body font-medium text-neutral-700">Created by</dt>
        <dd class="text-body text-neutral-900 sm:col-span-2">
            <%= link_to content.user.display_name, content.user, class: "text-brand hover:text-brand-600 font-medium transition-colors duration-200" %>
        </dd>
      </div>

      <!-- Addtional Content type form fields-->
      <%= yield %>
    </dl>
  </div>
</div>