<div class="container">
  <div class="schema-detail">
    <h1><%= @schema.name %></h1>

    <div class="schema-info">
      <div class="info-row">
        <span class="label">ID:</span>
        <span class="value"><%= @schema.id %></span>
      </div>

      <div class="info-row">
        <span class="label">Name:</span>
        <span class="value"><%= @schema.name %></span>
      </div>

      <div class="info-row">
        <span class="label">Type:</span>
        <span class="value">
          <%= if @schema.unique do %>
            <span class="badge unique">Unique (singleton)</span>
          <% else %>
            <span class="badge multiple">Multiple instances</span>
          <% end %>
        </span>
      </div>

      <div class="info-row">
        <span class="label">Managed By:</span>
        <span class="value">
          <%= if @schema.managed_by == "code" do %>
            <span class="badge" style="background-color: #e3f2fd; color: #1565c0;">Code (Read-only)</span>
          <% else %>
            <span class="badge" style="background-color: #f3e5f5; color: #6a1b9a;">UI (Editable)</span>
          <% end %>
        </span>
      </div>

      <div class="info-row">
        <span class="label">Created:</span>
        <span class="value"><%= Calendar.strftime(@schema.inserted_at, "%Y-%m-%d %H:%M:%S") %></span>
      </div>

      <div class="info-row">
        <span class="label">Updated:</span>
        <span class="value"><%= Calendar.strftime(@schema.updated_at, "%Y-%m-%d %H:%M:%S") %></span>
      </div>
    </div>

    <div class="fields-section">
      <h2>Fields</h2>

      <div class="info-box" style="margin-bottom: 20px;">
        <p><strong>Schema fields are defined in code.</strong></p>
        <p>Fields cannot be modified through the UI. You can create and edit content for this schema.</p>
      </div>

      <%= if Enum.empty?(@schema.fields) do %>
        <p class="empty-state">No fields defined.</p>
      <% else %>
        <ul class="fields-list">
          <%= for field <- @schema.fields do %>
            <li class="field-item">
              <div class="field-info">
                <%= if field.field_type == "reference" do %>
                  <span class="field-name">
                    <span class="reference-icon">🔗</span>
                    <%= if field.referenced_schema do %>
                      <a href={"#{@base_path}/schemas/#{field.referenced_schema.id}"}>
                        <%= field.referenced_schema.name %>
                      </a>
                    <% else %>
                      Unknown Schema
                    <% end %>
                  </span>
                  <span class="field-type reference">schema</span>
                <% else %>
                  <span class="field-name"><%= field.name %></span>
                  <span class="field-type"><%= field.field_type %></span>
                  <%= if Map.get(field.options, "multiline") do %>
                    <span class="badge" style="background-color: #e8f5e9; color: #2e7d32; font-size: 0.75rem; margin-left: 8px;">multiline</span>
                  <% end %>
                <% end %>
                <%= if Map.get(field.options, "as_title") do %>
                  <span class="badge" style="background-color: #e3f2fd; color: #1565c0; font-size: 0.75rem; margin-left: 8px;">title</span>
                <% end %>
              </div>
            </li>
          <% end %>
        </ul>
      <% end %>
    </div>

    <div class="actions">
      <a href={@base_path} class="btn-secondary">← Back to List</a>
    </div>
  </div>
</div>
