<%= content_tag :div, class: "modal modal-right", id: "new_graphics_element_modal", aria: { labelledby: "modalLabel", hidden: true }, role: "dialog", tabindex: -1 do %>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">New GFX Cue Element</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <%= bootstrap_form_with model: [graphics_element.video, "video_analyses", graphics_element], layout: :horizontal, label_col: "col-3", control_col: "col-9" do |form| %>
        <div class="modal-body">

          <%= render "video_analyses/show_hide_edl_events", edl_events_data: @edl_events_data, model_name: "graphics_element" %>

          <div id="graphics_element_fields">
            <%= form.hidden_field :edl_type, value: graphics_element.edl_type %>
            <%= form.hidden_field :time_elapsed, value: graphics_element.time_elapsed %>
            <%= form.static_control nil, name: nil, label: "Source EDL ", value: graphics_element.edl_type.to_s.titleize %>
            <%= form.static_control nil, name: nil, label: "Video Timecode", value: graphics_element.appears_at %>
            <%= form.text_area nil, name: nil, label: "Matched Filename", value: matched_file_name, id: "matched_file_name", readonly: true if matched_file_name.present? %>
            <%= form.select :graphic_type, options_for_graphic_types_select, { include_blank: true }, class: "custom-select" %>
            <%= form.text_field :text %>
            <%= form.text_field :channel %>
            <%= form.text_field :timecode_in %>
            <%= form.text_field :timecode_out %>
            <%= form.text_field :duration %>
            <%= form.text_field :source_file_name %>
            <%= form.text_field :clip_name %>
            <%= form.text_field :description %>
          </div>
        </div>
        <div class="modal-footer">
          <%= form.button "Close", class: "btn btn-secondary", data: { dismiss: "modal" } %>
          <%= form.submit "Create GFX Element", class: "btn btn-primary", data: { disable_with: t("shared.disable_with") } %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>
