{{title model.title}}

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

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

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

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

<BsModal
  @title={{t "poll.modal.timezoneDiffers.title"}}
  @open={{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 timezoneChoosen) true}}
      data-test-button="use-poll-timezone"
    >
      {{t "poll.modal.timezoneDiffers.button.usePollTimezone"}}
    </BsButton>>
  </modal.footer>
</BsModal>