plato

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

  <form action={"#{@base_path}/content/#{@content.id}/update"} method="post" enctype="multipart/form-data">
    <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
    <%= for field <- @content.schema.fields do %>
      <div class="form-group">
        <label for={"field_#{field.id}"}><%= field.name %>:</label>

        <%= if field.field_type == "text" do %>
          <%= if Map.get(field.options, "multiline") do %>
            <textarea
              id={"field_#{field.id}"}
              name={"content[#{field.id}]"}
              style="width: 100%; height: 250px; resize: none;"
              required
            ><%= Map.get(@content.field_values, to_string(field.id), "") %></textarea>
          <% else %>
            <input
              type="text"
              id={"field_#{field.id}"}
              name={"content[#{field.id}]"}
              value={Map.get(@content.field_values, to_string(field.id), "")}
              required
            />
          <% end %>
        <% end %>

        <%= if field.field_type == "richtext" do %>
          <input
            type="hidden"
            id={"field_#{field.id}"}
            name={"content[#{field.id}]"}
            value={Map.get(@content.field_values, to_string(field.id), "")}
          />
          <trix-editor
            input={"field_#{field.id}"}
            placeholder={"Enter #{field.name}..."}
          ></trix-editor>
        <% end %>

        <%= if field.field_type == "image" do %>
          <% existing_image = Map.get(@content.field_values, to_string(field.id)) %>
          <%= if existing_image && is_map(existing_image) && Map.get(existing_image, "url") do %>
            <div style="margin-bottom: 12px; padding: 12px; background: #f5f5f5; border-radius: 4px;">
              <div style="margin-bottom: 8px;"><strong>Current image:</strong></div>
              <img
                src={Map.get(existing_image, "url")}
                alt={Map.get(existing_image, "filename", "Current image")}
                style="max-width: 300px; max-height: 200px; border-radius: 4px; margin-bottom: 8px;"
              />
              <div style="font-size: 0.875rem; color: #666;">
                <div><%= Map.get(existing_image, "filename", "Unknown") %></div>
                <%= if Map.get(existing_image, "size_bytes") do %>
                  <div><%= Float.round(Map.get(existing_image, "size_bytes") / 1024, 1) %> KB</div>
                <% end %>
              </div>
            </div>
          <% end %>
          <input
            type="file"
            id={"field_#{field.id}"}
            name={"content_files[#{field.id}]"}
            accept="image/*"
          />
          <small style="color: #666; font-size: 0.875rem;">
            <%= if existing_image, do: "Upload a new image to replace the current one", else: "Upload an image file" %>
          </small>
        <% end %>

        <%= if field.field_type == "reference" do %>
          <select
            id={"field_#{field.id}"}
            name={"content[#{field.id}]"}
            required
          >
            <option value="">Select <%= field.name %>...</option>
            <%= for content <- @all_contents do %>
              <%= if content.schema_id == field.referenced_schema_id do %>
                <% current_value = Map.get(@content.field_values, to_string(field.id)) %>
                <% is_selected = current_value && to_string(content.id) == to_string(current_value) %>
                <option value={content.id} selected={is_selected}>
                  <%= content.schema.name %> #<%= content.id %>
                  <%= if Map.get(content.field_values, "name"), do: " - #{Map.get(content.field_values, "name")}" %>
                </option>
              <% end %>
            <% end %>
          </select>
        <% end %>
      </div>
    <% end %>

    <div class="actions">
      <button type="submit">Save Changes</button>
      <a href={"#{@base_path}/content/#{@content.id}"} class="btn-secondary">Cancel</a>
    </div>
  </form>
</div>