<div class="page-header">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="<%= root_path %>"><%= t("views.right_panel.button.home") %></a></li>
    <li class="breadcrumb-item"><a href="<%= settings_menu_category_simple_menu_items_path(@category) %>"><%= t("en.simple_menu_item") %></a></li>
    <li class="breadcrumb-item active"><%= t("views.btn.edit") %></li>
    <span class="float-right">
      <%= link_to 'Back', settings_menu_category_path(@category) %>
    </span>
  </ol>
</div>
<br>
<%= render 'form', settings_simple_menu_item: @settings_menu_item, item_sets: @item_sets %>

<script type="text/javascript">
$(function(){
	// auto selected after loaded
	<%
		@settings_menu_item.item_sets.each do |set|
	%>
	$("#simple_menu_item_item_sets option[value='" + <%= set.id %> + "']").attr("selected","selected").css({'color':'#fff','background':'#215d9c'});
	<%
		end
	%>

	// After loaded
	$("#simple_menu_item_item_sets").on('click', 'option', function(e){
		if($(this).attr("selected")){
			$(this).removeAttr("selected");
			$(this).css({'color':'#000','background':'#fff'});
		}
	});
});
</script>
