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

<!-- Add Rule modal -->
<div class="modal hide fade" id="add_rule_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 rule</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.getFeatureNames() == null || project.getFeatureNames().isEmpty()) {
            <p class="text-center danger"><b>No features found</b></p>
        }
        @if(project.getTableNames() != null && !project.getTableNames().isEmpty() && project.getFeatureNames() != null && !project.getFeatureNames().isEmpty()) {
              <form class="form-horizontal" id="add_rule_form"
                      data-target="#add_rule_modal" method="post"
                    action="@controllers.project.routes.RuleController.addRule(project.getName())" role="form">
                
                   <fieldset>              
                   <div class="control-group">
                       <label class="control-label" for="rule_name"><b>Rule Name</b></label>
                       <div class="controls">
                           <input type="text" id="rule_name" name="rule_name" required>
                       </div>
                   </div>
                   </fieldset>
     
                   <fieldset>
                       <div class="control-group">        
                           <label class="control-label" for="table1"><b>Table 1</b></label>  
                           <div class="controls">  
                               <select id="table1_name_r" name="table1_name_r">
                                @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="table2"><b>Table 2</b></label>  
                           <div class="controls">  
                               <select id="table2_name_r" name="table2_name_r">
                                @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>
                   </fieldset>
                   
              		<table id="rule_table">
              			<tr id="row0">
              				<th>Feature</th>
              				<th>Operator</th>
              				<th>Value</th>
              			</tr>
   						<tr id="row1">
     						<td>  
                               <select id="feature1" name="feature1" style="width:190px">
                                	@for(featureName <- project.getFeatureNames()){
                                   		<option value="@featureName">@featureName</option>
                                   	}
                            	</select>  
                       		</td>
                       		<td>
                       			<select id="op1" name="op1" style="width:210px">
                                	@for(operatorName <- com.walmart.productgenome.matching.models.RelationalOperator.getOperatorNames()){
                                   		<option value="@operatorName">@operatorName</option>
                                   	}
                            	</select>
                       		</td>
                       		<td>
                       			<input type="text" id="val1" name="val1" style="width:50px" required>
                       		</td>
                       	</tr>
					</table>
					<div id="main">
						<center>
        				<input type="button" id="btAdd" value="Add Term" class="bt" project_name="@project.getName()" />
        				<input type="button" id="btRemove" value="Remove Term" class="bt" />
        				<input type="button" id="btRemoveAll" value="Remove All Terms" class="bt" /><br />
        				</center>
    				</div>
    				<br /><br />
					<div class="control-group">
                       <div class="controls">
                           <input type="checkbox" name="save_to_disk" checked> Save the rule to disk
                       </div>
                    </div>
            </form>
          }
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button id="add_rule_btn" form="add_rule_form" class="btn btn-primary" type="submit">Add</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->