@(project: com.walmart.productgenome.matching.models.data.Project)

<!-- Add Feature modal -->
<div class="modal hide fade" id="add_feature_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
        <h4 class="modal-title">Add a feature</h4>
      </div>
      <div class="modal-body">
      	@if(project.getTableNames() == null || project.getTableNames().isEmpty()) {
            <p class="text-center danger"><b>No tables found</b></p>
        }
        @if(project.getFunctionNames() == null || project.getFunctionNames().isEmpty()) {
            <p class="text-center danger"><b>No functions found</b></p>
        }
        @if(project.getTableNames() != null && !project.getTableNames().isEmpty() && project.getFunctionNames() != null && !project.getFunctionNames().isEmpty()) {
	      	<form class="form-horizontal" id="add_feature_form"
	      			data-target="#add_feature_modal" method="post"
	                action="@controllers.project.routes.RuleController.addFeature(project.getName())" role="form">
	        	
	        	<legend>Feature</legend>
	           	<fieldset>              
                   <div class="control-group">
                       <label class="control-label" for="feature_name"><b>Feature Name</b></label>
                       <div class="controls">
                           <input type="text" id="feature_name" name="feature_name" required>
                       </div>
                   </div>
                </fieldset>
               	<legend>Argument 1</legend>
	           	<fieldset>
	               	<div class="control-group">        
	                   	<label class="control-label" for="table1_f"><b>Table 1</b></label>  
	                   	<div class="controls">  
	                       	<select id="table1_name_f" name="table1_name_f" project_name="@project.getName()">
	                        	@for(tableName <- project.getTableNames()) {
	                        		@if(tableName.equals(project.getDefaultTable1())) {
	                               		<option value="@tableName" selected>@tableName</option>
	                               	}
	                               	@if(!tableName.equals(project.getDefaultTable1())) {
	                               		<option value="@tableName">@tableName</option>
	                               	}
	                           	}
	                        </select>  
	                   	</div>
	               	</div>
	           		<div class="control-group">        
	                   	<label class="control-label" for="table1_f"><b>Attribute</b></label>  
	                   	<div class="controls">  
	                       	<select id="attr1_name_f" name="attr1_name_f">
	                       	</select>  
	                   	</div>
	               	</div>
               	</fieldset>
               	<legend>Argument 2</legend>
	           	<fieldset>
	               	<div class="control-group">        
	                   	<label class="control-label" for="table2_f"><b>Table 2</b></label>  
	                   	<div class="controls">  
	                       	<select id="table2_name_f" name="table2_name_f" project_name="@project.getName()">
	                        	@for(tableName <- project.getTableNames()) {
	                        		@if(tableName.equals(project.getDefaultTable2())) {
	                               		<option value="@tableName" selected>@tableName</option>
	                               	}
	                               	@if(!tableName.equals(project.getDefaultTable2())) {
	                               		<option value="@tableName">@tableName</option>
	                               	}
	                           	}
	                        </select>  
	                   	</div>
	               	</div>
	           		<div class="control-group">        
	                   	<label class="control-label" for="table2_f"><b>Attribute</b></label>  
	                   	<div class="controls">  
	                       	<select id="attr2_name_f" name="attr2_name_f">
	                       	</select>  
	                   	</div>
	               	</div>
	            </fieldset>
	            <legend>Applicable Functions (<span id="function_count"></span>)</legend>
	           	<fieldset>
	               	<div class="control-group">        
	                   	<label class="control-label" for="function"><b>Function Name</b></label>  
	                   	<div class="controls">  
	                       	<select id="function_name" name="function_name">
	                        </select>  
	                   	</div>
	               	</div>
               	</fieldset>
               	<div class="control-group">
                	<div class="controls">
                    	<input type="checkbox" name="save_to_disk" checked> Save the feature to disk
                    </div>
                </div> 
	        </form>
      	}
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button id="add_feature_btn" form="add_feature_form" class="btn btn-primary" type="submit">Add</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->