@(id: UUID, name:String, desc:String, defaultspace:Option[ProjectSpace], spaceList: List[models.ProjectSpace], isNameRequired: Boolean, isDescriptionRequired: Boolean, isNew:Boolean, creators: List[String])(implicit user: Option[models.User])
@import play.api.i18n.Messages
@import _root_.util.Formatters._
@import api.Permission

@main("Curation Object") {
    <script src="@routes.Assets.at("javascripts/curation-create.js")" language="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 origName = "@name";
      
      var origCreators = [
	  @if(creators.length !=0) {
      	@for(i <- 0 to (creators.length  - 2) ) {
      		"@creators(i).trim",
  		}
   		"@creators(creators.length-1).trim"
   		} ];
    </script>
    @if(isNew) {
        <ol class="breadcrumb">
            @defaultspace match {
                case Some(sp) => {
                   <li><span class="glyphicon glyphicon-hdd"></span> <a href="@routes.Spaces.getSpace(sp.id)" title="@sp.name"> @Html(ellipsize(sp.name,18))</a></li>
                }
                case None => {
                    @user match {
                        case Some(u) => {
                           <li> <span class="glyphicon glyphicon-user"></span> <a href= "@routes.Profile.viewProfileUUID(u.id)" title="@u.fullName"> @Html(ellipsize(u.fullName, 18)) </a></li>
                        }
                        case None => {}
                    }
                }
            }

            <li><span class="glyphicon glyphicon-globe"></span> Create New @Messages("curationobject.label")</li>
        </ol>
        <div class="page-header">

            <h1>Create New @Messages("curationobject.label")</h1>
        </div>
    } else {
        <ol class="breadcrumb">
            @defaultspace match {
                case Some(sp) => {
                    <li><span class="glyphicon glyphicon-hdd"></span> <a href="@routes.Spaces.getSpace(sp.id)" title="@sp.name"> @Html(ellipsize(sp.name, 18))</a></li>
                }
                case None => {
                    //Right now this is not used. It is a placeholder for when we have a personal space/ private space/ user space where you can publish stuff into.
                    @user match {
                        case Some(u) => {
                            <li><span class="glyphicon glyphicon-user"></span> <a href= "@routes.Profile.viewProfileUUID(u.id)" title="@u.fullName"> @Html(ellipsize(u.fullName, 18)) </a></li>
                        }
                        case None => {}
                    }
                }
            }
            <li><span class="glyphicon glyphicon-edit"></span> Edit @Messages("curationobject.label")</li>
        </ol>
        <div class="page-header">
            <h1>Edit @Messages("curationobject.label")</h1>
        </div>
    }

    <div class="row">
        <div class="col-md-12">
            <fieldset id="curationObjectFieldSet">
            <div class="form-group">
                <label id="namelabel" for="name"> Name</label>
                <input type="text" class="form-control" id="name" placeholder="A short name" value="@name">
                <span class="error hiddencomplete" id="nameerror">The name is a required field.</span>
            </div>
                        <div class="form-group">
			  <div id='aboutcreators'>
                <label id="creators-label" title="Ordered list of those responsible for this publication"> Creator(s): </label>
                        
            	<div id="ds_creators" class="inline">

                	
            	</div>
            				    
			  <a id="add-creator" class="hiddencomplete" href="javascript:addCreator()" title="Click to add a Creator">
                            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                        </a>
				<div><span class="error 
				  @if(creators.length >0 ) {hiddencomplete}
					" id="creatorerror">One or more creators are required </span></div>
			  </div>  
			</div>	                
            
            <div class="form-group">
 				<label id="desclabel" for="description"> 
                @if(Messages("dataset.description").toLowerCase == Messages("publicationrequest.description").toLowerCase) {
                	@Messages("publicationrequest.description")
                } else {
                		@Messages("publicationrequest.description") (@Messages("dataset.description"))
				}                		
                </label>
                <textarea rows="4" type="text" id="description" class="form-control" >@Html(desc)</textarea>
                               <span class="error 
                @if(desc.length >0 ) {hiddencomplete}
                " id="descerror">The abstract is a required field.</span>
            </div>

            @if(!spaceList.isEmpty) {
                <div class="form-group">
                    <label id="spacelabel" for="space"> Create in @Messages("space.title") </label>
                    <select  name="space" id="spaceid" class = "chosen-select">
                    @defaultspace match {
                        case Some(defaultspace) => {
                            <option value="@(defaultspace.id)">@(defaultspace.name)</option>
                            @spaceList.map { space =>
                                @if(space.id != defaultspace.id) {
                                    <option value="@(space.id)">@(space.name)</option>
                                }
                            }
                        }
                        case None => {
                            <option selected disabled>Select the @Messages("space.title")</option>
                            @spaceList.map { space =>

                                <option value="@(space.id)">@(space.name)</option>

                            }
                        }
                    }
                    </select>
                    <span class="error hiddencomplete" id="spaceerror"> Please select a @Messages("space.title").</span><br>
                </div>

            } else {
                <div class="form-group">
                    <label id="spacelabel" for="space"> Create in @Messages("space.title") </label>
                    <select  name="space" id="spaceid" class = "chosen-select">
                        No @Messages("spaces.title") available for creating a @Messages("curationobject.label"). Please add this @Messages("dataset.title").toLowerCase to a @Messages("space.title") first
                    </select>
                    <span class="error hiddencomplete" id="spaceerror"> Please select a @Messages("space.title").</span><br>
                </div>
            }
            </fieldset>
            <form id="curationcreate"  method="POST" enctype="multipart/form-data">
                    <!-- Redirect browsers with JavaScript disabled to the origin page -->
                <noscript>Javascript is required in order to create a new @Messages("curationobject.label").</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="creators" id="hiddencreators" value="not set">

            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            @if(!spaceList.isEmpty) {
                @if(isNew) {
                    <button class="btn btn-primary btn-margins" title="Create the @Messages("curationobject.label")" onclick="return createCuration();">
                        <span class="glyphicon glyphicon-upload"></span> Create
                    </button>
                    <button class="btn btn-default btn-margins" title="Reset the input fields" onclick="return resetFields();">
                        <span class="glyphicon glyphicon-unchecked"></span> Reset
                    </button>
                } else {
                    <button class="btn btn-default btn-margins" title="Edit @Messages("curationobject.label")" onclick="return updateCuration();">
                        <span class="glyphicon glyphicon-upload"></span> Update
                    </button>
                    <button class="btn btn-default btn-margins" title="cancel edit" onclick="return cancelEdit('@id');">
                        <span class="glyphicon glyphicon-remove-sign"></span> Cancel
                    </button>
                }
            } else {
                @if(isNew) {
                    <button class="btn btn-primary btn-margins disabled" title="Create the @Messages("curationobject.label")">
                        <span class="glyphicon glyphicon-upload"></span> Create
                    </button>
                    <button class="btn btn-default btn-margins disabled" title="Reset the input fields">
                        <span class="glyphicon glyphicon-unchecked"></span> Reset
                    </button>
                } else {
                    <button class="btn btn-default btn-margins disabled" title="Edit @Messages("curationobject.label")">
                        <span class="glyphicon glyphicon-upload"></span> Update
                    </button>
                    <button class="btn btn-default btn-margins disabled" title="cancel edit">
                        <span class="glyphicon glyphicon-remove-sign"></span> Cancel
                    </button>
                }
            }
        </div>
    </div>

    <link rel="stylesheet" href="@routes.Assets.at("stylesheets/chosen.css")">
    <script src="@routes.Assets.at("javascripts/chosen.jquery.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/creators.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/people.js")" type="text/javascript"></script>
    <script language="javascript">
        $(".chosen-select").chosen({
            width: "100%"
        });
        var origDesc = $('#description').val();
        displayCreators(origCreators);
        $("#name").change( function() {
            if($("#name").val().length == 0) {
              $("#nameerror").show();
            } else {
              $("#nameerror").hide();
            }
        });
        $("#description").change( function() {
            if($("#description").val().length == 0) {
              $("#descerror").show();
            } else {
              $("#descerror").hide();
            }
        });
        setCreatorChangeCallback( function() {
            if($("#ds_creators .creator").length == 0) {
              $("#creatorerror").show();
            } else {
              $("#creatorerror").hide();
            }
        });
</script>

}