{{/*
  Copyright 2014 Team 254. All Rights Reserved.
  Author: pat@patfairbank.com (Patrick Fairbank)

  UI for configuring the audience display sponsor roll.
*/}}
{{define "title"}}Sponsor Slides Configuration{{end}}
{{define "body"}}
<div class="row">
  <div class="col-lg-8 col-lg-offset-2">
    <div class="well">
      <legend>Sponsor Slides Configuration</legend>
      <p>Place images in /static/img/sponsors/</p>
      {{range $sponsorSlide := .SponsorSlides}}
        <form class="form-horizontal existing" action="/setup/sponsor_slides" method="POST">
          <div class="form-group">
            <div class="col-lg-7">
              <input type="hidden" name="id" value="{{$sponsorSlide.Id}}" />
                <div class="form-group imagetoggle">
                  <label for="image" class="col-sm-5 control-label">Image File Name</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" name="image" placeholder="image.svg"
                        value="{{$sponsorSlide.Image}}">
                  </div>
                </div>
                <div class="form-group hidden imagetoggle">
                  <label for="line1" class="col-sm-5 control-label">Line 1 Text</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" value="{{$sponsorSlide.Line1}}" name="line1"
                        placeholder="Chezy">
                  </div>
                </div>
                <div class="form-group hidden imagetoggle">
                  <label for="line2" class="col-sm-5 control-label">Line 2 Text</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" value="{{$sponsorSlide.Line2}}" name="line2"
                        placeholder="Industries">
                  </div>
                </div>
              <div class="form-group">
                <label for="subtitle" class="col-sm-5 control-label">Subtitle Text</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" name="subtitle" value="{{$sponsorSlide.Subtitle}}"
                      placeholder="Gold Sponsor">
                </div>
              </div>
              <div class="form-group">
                <label for="displayTimeSec" class="col-sm-5 control-label">Display Time (s)</label>
                <div class="col-sm-7">
                  <input type="number" class="form-control" name="displayTimeSec"
                      value="{{$sponsorSlide.DisplayTimeSec}}" placeholder="10">
                </div>
              </div>
            </div>
            <div class="col-lg-5">
              <button type="submit" class="btn btn-info btn-lower-third" name="action" value="save">Save</button>
              <br />
              <button type="submit" class="btn btn-primary btn-lower-third" name="action" value="delete">Delete</button>
              <br />
              <button class="btn btn-warning" name="toggleImage">Toggle Image/Text</button>
            </div>
          </div>
        </form>
      {{end}}
    </div>
  </div>
</div>
{{end}}
{{define "script"}}
<script type="text/javascript">
  $(function() {
    // Set up the toggling between specifying an image and specifying two lines of text.
    $("form.existing").each(function(index) {
      if (!$(this).find("input[name=image]").val().length && ($(this).find("input[name=line2]").val().length
          || $(this).find("input[name=line1]").val().length)) {
        $(this).find(".imagetoggle").toggleClass("hidden");
      }
    });
    $("button[name=toggleImage]").click(function(event) {
      event.preventDefault();
      $(this).parents("form").find(".imagetoggle").toggleClass("hidden");
      $(this).parents("form").find(".imagetoggle input").val("");
    });
  });
</script>
{{end}}