@(errorString: String, isNameRequired: Boolean, isDescriptionRequired: Boolean, spaceId: Option[String], parentId : Option[String], parentName : Option[String])(implicit flash: play.api.mvc.Flash, user: Option[models.User])

@import helper._
@import play.api.i18n.Messages
@import _root_.util.Formatters._

@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }

@main(Messages("collection.title")) {
  <!-- Custom items for the create collection workflow -->
  <script src="@routes.Assets.at("javascripts/collection-create.js")" type="text/javascript"></script>
  <script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" language="javascript"></script>
  <script type="text/javascript" language="javascript">
      //Global so that the javascript for the collection creation can reference this.
      var isNameRequired = @isNameRequired;
      var isDescRequired = @isDescriptionRequired;
      var parentCollectionId = "@parentId";
  </script>
    <script src="@routes.Assets.at("javascripts/chosen.jquery.js")" type="text/javascript"></script>
    <link rel="stylesheet" href="@routes.Assets.at("stylesheets/chosen.css")">
    <ol class="breadcrumb">
        @(parentId, parentName) match {
            case (Some(id), Some(name)) => {
                <li>  <span class="glyphicon glyphicon-th-large"></span> <a href="@routes.Collections.collection(UUID(id))" title="@name"> @Html(ellipsize(name, 18))</a></li>
                <li><span class="glyphicon glyphicon-th-large"></span> Create Child Collection</li>
            }
            case (_, _) => {}
        }
    </ol>
  <div class="page-header">
    <h1>Create Child Collection in @parentName </h1>
  </div>
  <div class="row">
	<div class="col-md-12">
	
	<div>
        <span id="status" class="success hiddencomplete alert alert-success" role="alert">A Status Message</span>     
        @if(errorString != null){
            <span class="error alert alert-danger" id="messageerror">@errorString</span>
        }else{           
            <span class="error hiddencomplete alert alert-danger" id="messageerror">An Error Message</span>
        }
    </div>
    <!-- Basic required elements for creating a new collection. -->
    <table style="width: 100%; margin-bottom: 40px; margin-top: 40px;">
        <tr>
            <td style="width: 20%; vertical-align:top;" class="input-table-cell">Name:</td>
            <td style="width: 80%; vertical-align:top;" class="input-table-cell">
                <textarea class="form-control" cols=40 rows=4 type="text" id="name"></textarea>
                <span class="error hiddencomplete" id="nameerror"> The name is a required field</span><br>
            </td>
            <td style="vertical-align:top;" class="input-table-cell">

            </td>
        </tr>
        <tr>
            <td style="width: 20%; vertical-align:top;" class="input-table-cell">Description:</td>
            <td style="width: 80%; vertical-align:top;" class="input-table-cell" id="desccell">
                <textarea class="form-control" cols=40 rows=4 type="text" id="description"></textarea>
                <span class="error hiddencomplete" id="descerror"> This description is a required field</span><br>
            </td>
        </tr>
        <tr>
            <td>	                            
            </td>
            <td>
                <button style="margin-top: 10px; margin-right: 10px;" class="btn btn-primary" title="Create the collection" onclick="return createCollection();">
                  <span class="glyphicon glyphicon-ok"></span> Create
                </button>
                <button style="margin-top: 10px;" class="btn btn-default" title="Clear the input fields" onclick="return clearFields();">
                  <span class="glyphicon glyphicon-unchecked"></span> Reset
                </button>
            </td>
        </tr>
    </table>	
    <form id="collectioncreate" action='@routes.Collections.submit' method="POST" enctype="multipart/form-data">
                    <!-- Redirect browsers with JavaScript disabled to the origin page -->
                    <noscript>Javascript is required in order to use the uploader to create a new dataset.</noscript>
                    
                    <input type="hidden" name="name" id="hiddenname" value="not set">
                    <input type="hidden" name="description" id="hiddendescription" value="not set">
                    <input type="hidden" name="space" id="hiddenspace" value="not set">
                    <input type="hidden" name = "parentcolid" id = "hiddenparentcolid" value = "@parentId">
    </form>
    </div>
  </div>
<script language="javascript">
    $(".chosen-select").chosen({
        width: "100%",
        placeholder_text_multiple: "Select spaces for this collection."
    });
</script>

}