{{define "title"}}GitHop - Settings{{end}}

{{define "repo"}}
    <li class="repo {{.TypeAsClassName}}">
      <label>
        <input type="checkbox" name="repo-{{.ID}}" value="include" {{if .IncludeInDigest}}checked{{end}}>
        <span class="glyph octicon octicon-{{.TypeAsOcticonName}}"></span>
        <a href="{{.HTMLURL}}">{{.FullName}}</a>
        <span class="vintage">{{.DisplayVintage}}</span>
      </label>
    </li>
{{end}}

{{define "body"}}

<form method="POST" action="{{routeUrl "save-settings"}}">

<div class="setting">
  <label>
    Frequency:
    <select name="frequency" id="frequency" onchange="updateWeeklyDayContainer()">
      <option value="daily" {{if eq "daily" .Account.Frequency}}selected{{end}}>Daily</option>
      <option value="weekly" {{if eq "weekly" .Account.Frequency}}selected{{end}}>Weekly</option>
    </select>
    <span id="weekly-day-container">
      on
      <select name="weekly_day">
        <option value="0" {{if eq 0 .Account.WeeklyDay}}selected{{end}}>Sundays</option>
        <option value="1" {{if eq 1 .Account.WeeklyDay}}selected{{end}}>Mondays</option>
        <option value="2" {{if eq 2 .Account.WeeklyDay}}selected{{end}}>Tuesdays</option>
        <option value="3" {{if eq 3 .Account.WeeklyDay}}selected{{end}}>Wednesdays</option>
        <option value="4" {{if eq 4 .Account.WeeklyDay}}selected{{end}}>Thursdays</option>
        <option value="5" {{if eq 5 .Account.WeeklyDay}}selected{{end}}>Fridays</option>
        <option value="6" {{if eq 6 .Account.WeeklyDay}}selected{{end}}>Saturdays</option>
      </select>
    </span>
    <div class="explanation">
      How often you'd like to get digests. If there is no activity on that day or week, then no email will be sent.
    </div>
  </label>
</div>

<div class="setting">
  <label>
    Timezone:
    <select name="timezone_name">
      {{$accountTimezoneName := .Account.TimezoneName}}
      {{range .Timezones}}
        {{if .LocationName}}
          <option value="{{.LocationName}}" {{if eq .LocationName $accountTimezoneName}}selected{{end}}>{{.LocationName}} (GMT {{.DisplayUTCOffset}})</option>
        {{else}}
          <option disabled></option>
        {{end}}
      {{end}}
    </select>
    <div class="explanation">
      Used for determining day boundaries and timestamps in emails.
    </div>
  </label>
</div>

<div class="setting">
  <label>
    Email address:
    <select name="email_address">
      {{$accountEmailAddress := .AccountEmailAddress}}
      {{range .EmailAddresses}}
          <option value="{{.}}" {{if eq . $accountEmailAddress}}selected{{end}}>{{.}}</option>
      {{end}}
    </select>
  </label>
    <div class="explanation">
      Where your digest will be sent to. Set of addresses is controlled by <a href="https://github.com/settings/emails">your GitHub settings</a>.
    </div>
</div>

<div class="setting">
  <label>
    Include
    <select id="included-repos" onchange="updateReposContainer()">
      <option value="all" {{if not .Account.ExcludedRepoIds}}selected{{end}}>all</option>
      <option value="some" {{if .Account.ExcludedRepoIds}}selected{{end}}>some</option>
    </select>
    of your {{len .Repos.AllRepos}} repositories in the digest.

    <div id="repos-container">
      <div class="repos">
        <h2>
          <a href="https://github.com/{{.User.Login}}">
          <img src="{{.User.AvatarURL}}" class="avatar">{{.User.Login}}</a>
        </h2>
        <ul>
          {{range .Repos.UserRepos}}
            {{template "repo" .}}
          {{end}}
        </ul>
      </div>

      {{range .Repos.OtherUserRepos}}
        <div class="repos">
          <h2>
            <a href="https://github.com/{{.User.Login}}">
            <img src="{{.User.AvatarURL}}" class="avatar">{{.User.Login}}</a>
          </h2>
          <ul>
            {{range .Repos}}
              {{template "repo" .}}
            {{end}}
          </ul>
        </div>
      {{end}}

      {{range .Repos.OrgRepos}}
        <div class="repos">
          <h2>
            <a href="https://github.com/{{.Org.Login}}">
            <img src="{{.Org.AvatarURL}}" class="avatar">{{.Org.Login}}</a>
          </h2>
          <ul>
            {{range .Repos}}
              {{template "repo" .}}
            {{end}}
          </ul>
        </div>
      {{end}}
    </div>
  </label>
</div>

<input type="submit" value="Save Settings">

</form>

<script>
  function updateWeeklyDayContainer() {
    var frequencyNode = document.getElementById("frequency");
    var weeklyDayContainerNode = document.getElementById("weekly-day-container");
    if (frequencyNode.value == "weekly") {
      weeklyDayContainerNode.style.display = "inline";
    } else {
      weeklyDayContainerNode.style.display = "none";
    }
  }

  function updateReposContainer() {
    var includedReposNode = document.getElementById("included-repos");
    var reposContainerNode = document.getElementById("repos-container");
    if (includedReposNode.value == "some") {
      reposContainerNode.style.display = "block";
    } else {
      var repoCheckboxes = document.querySelectorAll(".repo input[type=checkbox]");
      for (var i = 0; i < repoCheckboxes.length; i++) {
        repoCheckboxes[i].checked = true;
      }
      reposContainerNode.style.display = "none";
    }
  }

  updateWeeklyDayContainer();
  updateReposContainer();
</script>

{{end}}