div data-controller="project_popup"
  = simple_form_for(@project) do |f|
    = f.error_notification

    .container-fluid
      .d-flex.align-items-center.justify-content-between.mb-3
        .fs-24.medium 
          - if @project.new_record?
            | Add New Project 
          - else 
            | Edit Project

        .form-actions
          = f.button :submit, "Save", class: "btn btn-primary fs-12 medium px-4"
      .d-flex.justify-content-between
        .w-25.me-3
          label role="button" for="project_image"
            - if @project.image_file_name.nil?
                img.rounded.img-fluid src="/image_selector.jpg" style="aspect-ratio: 1; width:98%; object-fit: cover;" id="imagePreview"
            - else
                img.rounded.img-fluid src="#{@project.image_url}" style="aspect-ratio: 1; width:98%; object-fit: cover;" id="imagePreview"
          = f.input :image, label: false, input_html: {accept: "image/*", class: "mt-2 project-img-input"}
        .w-75
          .row
            .input-group
              label.fs-12.col-sm-2.col-form-label
                | Project Name 
              .col-sm-10
                = f.input :title, label: false, required: true, input_html: {class: "fs-12 bg-light border-0 form-control", maxlength: 50}
          .row
            .input-group
              label.fs-12.col-sm-2.col-form-label
                | Client Name 
              .col-sm-10
                = f.input :client, label: false, input_html: {class: "fs-12 bg-light border-0 form-control", maxlength: 50}
          .row
            .input-group
              label.fs-12.col-sm-2.col-form-label
                | Brand 
              .col-sm-10
                = f.input :brand, label: false, input_html: {class: "fs-12 bg-light border-0 form-control", maxlength: 50}
          .row
            .input-group
              label.fs-12.col-sm-2.col-form-label
                | Category 
              .col-sm-10
                = f.input :category, label: false, input_html: {class: "fs-12 bg-light border-0 form-control", maxlength: 50}
          .row
            .input-group
              label.fs-12.col-sm-2.col-form-label
                | Type 
              .col-sm-10
                = f.input :project_type, label: false, input_html: {class: "fs-12 bg-light border-0 form-control", maxlength: 50}
          .row
            .input-group
              label.fs-12.col-sm-2.col-form-label
                | Description 
              .col-sm-10
                = f.input :description, label: false, input_html: {class: "fs-12 bg-light border-0 form-control", rows: 5}