@(myForm: Form[controllers.spaceFormData], title:String, submitButton: Html, spaceId: Option[UUID], spaceName: Option[String])(implicit flash: play.api.mvc.Flash, user: Option[models.User])
@import play.api.i18n.Messages
@import helper._
@import play.api.Play.current
@import models.SpaceStatus
@import api.Permission
@import _root_.util.Formatters._
@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f)}


@main(title) {
  <div class="page-header">
    <ol class="breadcrumb">
      @(spaceId, spaceName) match {
        case (Some(s), Some(name)) => {
          <li> <span class="glyphicon glyphicon-hdd"></span>  <a href="@routes.Spaces.getSpace(s)" title="@name"> @Html(ellipsize(name, 18))</a></li>
          <li> <span class="glyphicon glyphicon-edit"></span> @Html(title)</li>
        }
        case (_,_) => {
          @user match {
            case Some(u) => {
              <li><span class="glyphicon glyphicon-user"></span> <a href= "@routes.Profile.viewProfileUUID(u.id)"> @Html(u.fullName) </a> </li>
              <li><span class="glyphicon glyphicon-hdd"></span> @Html(title) </li>
            }
            case None => {}
          }
        }
      }
    </ol>
    <h1>@title</h1>
    <p>@Messages("space.create.message", Messages("spaces.title"), Messages("datasets.title"))</p>
  </div>
  <div class="row">
    <div class="col-md-12">
      @if(myForm.hasErrors) {
        <div class="alert alert-error error">
          <p>Please fix all errors</p>
        </div>
      }
      @flash.get("error").map { message =>
        <div class="alert alert-error">
          <p>@message</p>
        </div>
      }

      @form(action = routes.Spaces.submit, 'enctype -> "multipart/form-data", 'class -> "form-horizontal", 'id -> "spaceForm") {
        <fieldset  id="nameDescrFieldSet">
          @inputText(myForm("name"), 'class -> "form-control", '_label -> "Name")
          @textarea(myForm("description"), 'class -> "form-control", '_label -> "Description")
          <div class ="control-group"><label class="control-label" for="homePages">External Links</label></div>
          <div class = "homePages">
            @repeat(myForm("homePages"), min = 1) {externalLink =>
              @inputText(externalLink, 'class -> "form-control", '_label -> "")
              @****** one too many delete buttons
              @if(myForm.hasErrors && myForm("homePages").indexes.length > 1) {
              <div class="home-page-delete"><a href="#">delete</a></div>
              }
              ******@
            }
            <div class="external-link-add"><a href="#">add</a></div>
          </div>
          @inputText(myForm("logoUrl"),'class -> "form-control", '_label-> "Logo URL")
          Recommended image size is 100 x 100
          @inputText(myForm("bannerUrl"),'class -> "form-control", '_label-> "Banner URL")
          Recommended image size is 1170 x 200

		  <div class ="control-group"><label class="control-label" for="affSpaces">Affiliated Spaces</label></div>
            <div class = "affSpaces">
            @repeat(myForm("affSpaces"), min = 1) {externalLink =>
              @inputText(externalLink, 'class -> "form-control", '_label -> "")
            }
            <div class="affiliated-space-add"><a href="#">add</a></div>
            <div>The names or IDs of other spaces whose published data should be shown on this space's Published Data page</div>
          </div>
          
          @helper.inputRadioGroup(myForm("expiration"), options("expiretrue"->"On", "expirefalse"->"Off"), '_label -> "Expiration")
          @defining(myForm("isTimeToLiveEnabled")) { isTimeToLiveEnabled =>
            <input type="hidden" name="isTimeToLiveEnabled" id="isTimeToLiveEnabled", value = @isTimeToLiveEnabled.value>
          }
          @helper.inputText(myForm("editTime"), 'class -> "form-control", '_label -> "Time to live (hours):")
          @*do not add class = form-control for this radio button*@

          @helper.inputRadioGroup(myForm("access"),
            options = options(SpaceStatus.PRIVATE.toString->SpaceStatus.PRIVATE.toString,SpaceStatus.PUBLIC.toString->SpaceStatus.PUBLIC.toString),
            '_label -> "Access")
          <p id="help_access">
            @Messages("crate.space.access.message", Messages("collections.title").toLowerCase(), Messages("datasets.title").toLowerCase, Messages("space.title").toLowerCase, Messages("dataset.title").toLowerCase)
          </p>
          @helper.input(myForm("space_id"), 'class -> "form-control", '_label ->"") {(id, name, value, args) =>
          <input type="hidden" name="@id" value="@value">
          }

        </fieldset>
        @submitButton
      }
    </div>
  </div>

  <script language="javascript">
  $(document).ready(function() {
    var verified = @play.Play.application().configuration().getBoolean("verifySpaces");
    var publicEnabled = @play.Play.application().configuration().getBoolean("enablePublic");
    if( publicEnabled) {

    if(verified){
      //enableVerified == true, create a space or still unverified space
      if(typeof $("input[name='access']:checked").val() === "undefined" || $("input[name='access']:checked").val() === "@SpaceStatus.TRIAL.toString"){

        $('#access').closest(".control-group").hide();
        $('#help_access').hide();
        $('#access').append('<input type="radio" id="access_trial" name="access" value="@SpaceStatus.TRIAL.toString" checked>')
      }
    } else{
      // enablePublic ==true  && enableVerified == false && update
      @if(spaceId.isDefined && !Permission.checkPermission(Permission.PublicSpace, ResourceRef(ResourceRef.space, spaceId.get))){
      $('#access').closest(".control-group").hide();
      $('#help_access').hide();
      }
      // enablePublic ==true  && enableVerified == false && create
      if(typeof $("input[name='access']:checked").val() === "undefined" ){
        document.getElementById('access_@SpaceStatus.PRIVATE.toString').checked= true;
      }
    }
  } else {
    // enablePublic == false
      $('#access').closest(".control-group").hide();
      $('#help_access').hide();
      document.getElementById('access_PRIVATE').checked= true;
  }
  });
  // as fields are added, they get the same default homePages[0] name For automatic binding the names need to
  // be homePages[0], homePages[1],.. etc. This function renumbers all the fields appropriately even if a field in the
  // middle of the list is deleted.
  function renumberItemMap(cssclass) {
      Array.prototype.reduce.call($('.'+cssclass + ' .control-group'), function (i, next) {
      var label = $(next).children('label');
      label.attr('for', label.attr('for').replace(/_\d+_/, '_' + i + '_'));

      var input = $(next).find('input');
      input.attr('id', input.attr('id').replace(/_\d+_/, '_' + i + '_'));
      input.attr('name', input.attr('name').replace(/\[\d+\]/, '[' + i + ']'));
		
	  var re = new RegExp(cssclass + '_\\d+_');	
      if (input.attr('id').match(re)) {
        return i + 1;
      }

      return i;
    }, 0);
  }

  function addDeleteInCaseOfError(parentclass, deleteclass) {
    vals = $('.' + parentclass + ' .control-group')
    for(var i = 0; i < vals.length - 1 ; i++)
    {
      $(vals[i]).after($('<div class="' + deleteclass + '"><a href="#">delete</a></div>'));
    }
  };

   addDeleteInCaseOfError('homePages','external-link-delete');
   addDeleteInCaseOfError('affSpaces','affiliated-space-delete');


  var title = $('.page-header h1').text();
  if(title.indexOf("Edit ") >= 0)
  {
    if(!$('.help-inline').text())
    {
       var timeToLive = $('#editTime').val();
      timeToLive = timeToLive/3600000;
      $('#editTime').val(timeToLive);
    }
  }
  else
  {
    $('#editTime').val(720);
  }


  var $radios = $('input:radio[name=expiration]');
  var isEnabled =  $('#isTimeToLiveEnabled').val();

  if (isEnabled === "true") {
       $radios.filter('[value=expiretrue]').prop('checked', true);
       //$('input:radio[name=radiogroup]')[0].checked = true;
       $('#expireenabled').html("On");
  }
  else {
      $radios.filter('[value=expirefalse]').prop('checked', true);
       //$('input:radio[name=radiogroup]')[1].checked = true;
      $('#expireenabled').html("Off");
  }
  $('.homePages').on('click', '.external-link-delete a', function () {
    $(this).parent().prev().remove();
    $(this).parent().remove();
    renumberItemMap('homePages');
  });
   $('.affSpaces').on('click', '.affiliated-space-delete a', function () {
    $(this).parent().prev().remove();
    $(this).parent().remove();
    renumberItemMap('affSpaces');
  });
 
  $('.control-label').addClass('h3');
  $('.external-link-add').click(function () {
    var value = $(this).prev().clone();
    if (value.find('input').val().trim()) {
      $(this).prev().after($('<div class="external-link-delete"><a href="#">delete</a></div>'));
      value.find('input').val('');
      $(this).before(value);
      renumberItemMap('homePages');
    }
  });
$('.affiliated-space-add').click(function () {
    var value = $(this).prev().clone();
    if (value.find('input').val().trim()) {
      $(this).prev().after($('<div class="affiliated-space-delete"><a href="#">delete</a></div>'));
      value.find('input').val('');
      $(this).before(value);
      renumberItemMap('affSpaces');
    }
  });


  //remove blank lines before submitting
  $('form').submit(function () {
    var expireEnabled = $('#expiration_expiretrue').prop('checked');
    $('#isTimeToLiveEnabled').val(expireEnabled);
    $('.homePages .control-group').each(function () {
      var valueInput = $(this).find('input');

      if (valueInput.val() === '') {
        $(this).next().remove();
        $(this).remove();
        renumberItemMap('homePages');
      }

    });
    $('.affSpaces .control-group').each(function () {
      var valueInput = $(this).find('input');

      if (valueInput.val() === '') {
        $(this).next().remove();
        $(this).remove();
        renumberItemMap('affSpaces');
      }

    });
    
  });
      

  $('#cancel_space').click(function() {
    if(!@spaceId.isEmpty) {
       window.location.replace("@routes.Spaces.getSpace(spaceId.getOrElse(new UUID("")))");
    } else {
      window.location.replace("@routes.Spaces.list()");
    }

  });
  @if(!play.api.Play.configuration.getBoolean("enable_expiration").getOrElse(false)) {
    $("#expiration").closest(".control-group").hide();
    $("#editTime").closest(".control-group").hide();
  }

  </script>
}