{{#let @model as |poll|}}
  {{page-title poll.title}}

  <div id="poll">
    <div class="row">
      <div class="col-sm-6 col-lg-5">
        <div class="box meta-data">
          <h2 class="title">{{poll.title}}</h2>
          <p class="description">{{poll.description}}</p>
          <p class="dates">
            <span class="creationDate">
              {{t
                "poll.created-date"
                date=(moment-format poll.creationDate "LLLL" locale=this.currentLocale)
              }}
            </span>
            {{#if poll.expirationDate}}
              <br>
              <span class="expirationDate">
                {{t
                  "poll.expiration-date"
                  date=(moment-format poll.expirationDate "LLLL" locale=this.currentLocale)
                }}
              </span>
            {{/if}}
          </p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-6 offset-lg-1">
        <div class="box poll-link cr-poll-link">
          <p>{{t "poll.share.title"}}</p>
          <p class="link cr-poll-link__link">
            <small>
              <code class="cr-poll-link__url">{{this.pollUrl}}</code>
            </small>
            <CopyButton
              @clipboardText={{this.pollUrl}}
              @error={{action "linkAction" "selected"}}
              @success={{action "linkAction" "copied"}}
              class="btn btn-secondary cr-poll-link__copy-btn btn-sm"
            >
              {{t "poll.link.copy-label"}}&nbsp;
              <span class="oi oi-clipboard" title={{t "poll.link.copy-label"}} aria-hidden="true"></span>
            </CopyButton>
          </p>
          <small class="text-muted">
            {{t "poll.share.notice"}}
          </small>
        </div>
      </div>
    </div>

    {{#if this.showExpirationWarning}}
      <div class="row">
        <div class="col-xs-12">
          <BsAlert @type="warning" class="expiration-warning">
            {{t
              "poll.expiration-date-warning"
              timeToNow=(moment-from-now poll.expirationDate locale=this.currentLocale)
            }}
          </BsAlert>
        </div>
      </div>
    {{/if}}

    <div class="box">
      <ul class="nav nav-tabs" role="tablist">
        <LinkTo @route="poll.participation" @model={{poll}} @tagName="li" @activeClass="active" class="participation nav-item">
          <LinkTo @route="poll.participation" @model={{poll}} class="nav-link">
            {{t "poll.tab-title.participation"}}
          </LinkTo>
        </LinkTo>
        <LinkTo @route="poll.evaluation" @model={{poll}} @tagName="li" @activeClass="active" class="evaluation nav-item">
          <LinkTo @route="poll.evaluation" @model={{poll}} class="nav-link">
            {{t "poll.tab-title.evaluation"}}
          </LinkTo>
        </LinkTo>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active">
          {{outlet}}
        </div>
      </div>
    </div>
  </div>
{{/let}}

<BsModal
  @title={{t "poll.modal.timezoneDiffers.title"}}
  @open={{this.mustChooseTimezone}}
  @footer={{false}}
  @closeButton={{false}}
  @keyboard={{false}}
  @autoClose={{false}}
  data-test-modal="choose-timezone"
  as |modal|
>
  <modal.body>
    <p>
      {{t "poll.modal.timezoneDiffers.body"}}
    </p>
  </modal.body>
  <modal.footer>
    <BsButton
      @onClick={{action "useLocalTimezone"}}
      data-test-button="use-local-timezone"
    >
      {{t "poll.modal.timezoneDiffers.button.useLocalTimezone"}}
    </BsButton>
    <BsButton
      @onClick={{action (mut this.timezoneChoosen) true}}
      data-test-button="use-poll-timezone"
    >
      {{t "poll.modal.timezoneDiffers.button.usePollTimezone"}}
    </BsButton>>
  </modal.footer>
</BsModal>