<div class="container">
  <h1><%= @content.schema.name %> #<%= @content.id %></h1>

  <div class="content-detail">
    <div class="schema-info">
      <div class="info-row">
        <span class="label">Schema:</span>
        <span class="value">
          <a href={"#{@base_path}/schemas/#{@content.schema.id}"}><%= @content.schema.name %></a>
        </span>
      </div>

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

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

    <div class="field-values">
      <h2>Field Values</h2>
      <%= for field <- @content.schema.fields do %>
        <div class="field-value-row">
          <span class="field-label"><%= field.name %>:</span>
          <span class="field-value">
            <%= if field.field_type == "text" do %>
              <%= Map.get(@content.field_values, to_string(field.id), "—") %>
            <% end %>

            <%= if field.field_type == "richtext" do %>
              <%= raw(Map.get(@content.field_values, to_string(field.id), "—")) %>
            <% end %>

            <%= if field.field_type == "image" do %>
              <% image_data = Map.get(@content.field_values, to_string(field.id)) %>
              <%= if image_data && is_map(image_data) && Map.get(image_data, "url") do %>
                <div style="margin-top: 8px;">
                  <img
                    src={Map.get(image_data, "url")}
                    alt={Map.get(image_data, "filename", "Uploaded image")}
                    style="max-width: 100%; max-height: 400px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
                  />
                  <div style="margin-top: 8px; font-size: 0.875rem; color: #666;">
                    <div><strong>Filename:</strong> <%= Map.get(image_data, "filename", "Unknown") %></div>
                    <%= if Map.get(image_data, "size_bytes") do %>
                      <div><strong>Size:</strong> <%= Float.round(Map.get(image_data, "size_bytes") / 1024, 1) %> KB</div>
                    <% end %>
                  </div>
                </div>
              <% else %>
                —
              <% end %>
            <% end %>

            <%= if field.field_type == "reference" do %>
              <% content_id = Map.get(@content.field_values, to_string(field.id)) %>
              <%= if content_id do %>
                <% referenced_content = Enum.find(@all_contents, &(&1.id == String.to_integer(content_id))) %>
                <%= if referenced_content do %>
                  <a href={"#{@base_path}/content/#{referenced_content.id}"}>
                    <%= referenced_content.schema.name %> #<%= referenced_content.id %>
                  </a>
                <% else %>
                  Unknown content
                <% end %>
              <% else %>
                —
              <% end %>
            <% end %>
          </span>
        </div>
      <% end %>
    </div>

    <div class="actions">
      <a href={"#{@base_path}/content/#{@content.id}/edit"} class="btn-primary">Edit</a>
      <a href={"#{@base_path}/content"} class="btn-secondary">← Back to Content</a>
    </div>
  </div>
</div>
