@(
  doc: services.document.ExtendedDocumentMetadata,
  currentUser: services.user.User,
  gazetteers: Seq[services.generated.tables.records.AuthorityFileRecord],
  gazetteerPrefs: controllers.document.settings.actions.GazetteerPreferences
 )(implicit request: RequestHeader, messages: Messages, webJarsUtil: org.webjars.play.WebJarsUtil)

@_layout("Settings | Annotation Preferences", doc, currentUser, Some("preferences")) {
  <div class="panel">
    <h2>Gazetteers</h2>
    <div class="inner">
      <form id="gazetteer-preferences">
        <input
          type="checkbox"
          id="use-all"
          name="use-all"
          @if(gazetteerPrefs.useAll) { checked="true" }"/>
        <label for="use-all">
          Use all gazetteers when searching for places
        </label>
        <span class="save-notifier" data-for="use-all">Saved</span>
        <span class="plausibility-warning">Please select at least one gazetteer</span>

        <div id="gazetteer-list">
          <table@if(gazetteerPrefs.useAll){ class="disabled"}>
            <tbody>
              @for(gazetteer <- gazetteers) {
                <tr data-id="@gazetteer.getId">
                  <td>
                    <input
                      class="included"
                      type="checkbox"
                      id="@gazetteer.getId"
                      name="@gazetteer.getId"
                      @if(gazetteerPrefs.useAll || gazetteerPrefs.includes.contains(gazetteer.getId)) { checked="true" }"/>
                    <label for="@gazetteer.getId"></label>
                  </td>
                  <td class="shortname">
                    <div @if(Option(gazetteer.getColor).isDefined) {style="background-color:@gazetteer.getColor"}>
                      @if(Option(gazetteer.getHomepage).isDefined) {
                        <a href="@gazetteer.getHomepage" target="_blank">@gazetteer.getShortname</a>
                      } else {
                        @gazetteer.getShortname
                      }
                    </div>
                  </td>
                  <td>
                    @gazetteer.getFullname
                    <span class="save-notifier" data-for="@gazetteer.getId">Saved</span>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
        <p>
          Know about other gazetteers you want to see here?
          <a href="mailto:commons@@pelagios.org">Get in touch!</a>
        </p>
      </form>
    </div>
  </div>

  <script>
  window.config = {
    documentId: "@doc.id"
  }
  </script>

  @Html(webJarsUtil.requireJs(routes.Assets.versioned("javascripts/document/settings/preferences.js")))

  @helper.javascriptRouter("jsRoutes")(
    controllers.document.settings.routes.javascript.SettingsController.setGazetteerPreferences
  )
}