<h1 i18n >
    {{"visibility.top_txt"|translate}}
</h1 >
<section class="answers" >
    <h2 >
        {{"visibility.title"|translate}}
    </h2 >
    <span >
    {{"visibility.visibility_want"|translate}}
    </span >
    <select
        name="visible_people"
        id="visible_people"
        [(ngModel)]="config.visibility"
    >
        <option value="link_only" >
            {{"visibility.visibility_link"|translate}}
        </option >
        <option value="only_me" >
            {{"visibility.visibility_nobody"|translate}}
        </option >
    </select >
    <span >
    {{"visibility.visibility_see"|translate}}
    </span >

</section >

<section class="possible_votes" >
    <h2 >
        {{"visibility.votes"|translate}}
    </h2 >
    <label for="votes" >
        {{"visibility.votes_possible"|translate}}
    </label >
    <select
        name="votes"
        id="votes"
        [(ngModel)]="config.voteChoices"
    >
        <option value="only_yes" >
            {{"visibility.votes_possible_single"|translate}}
        </option >
        <option value="normal" >
            {{"visibility.votes_possible_normal"|translate}}
        </option >
        <option value="full" >
            {{"visibility.votes_possible_full"|translate}}
        </option >
    </select >
</section >
<section class="expiracy" >
    <label for="expirationDate" >
        {{"visibility.archiving"|translate}}
    </label >

    <input
        type="date"
        id="expirationDate"
        [(ngModel)]="config.expirationDate" >
    <div class="modification" >
        <label for="modificationAbility" >
            {{"visibility.archiving_start"|translate}}
        </label >
        <select
            name="modificationAbility"
            id="modificationAbility"
            [(ngModel)]="config.canModifyAnswers" >
            <option value=true >
                {{"visibility.archiving_can"|translate}}
            </option >
            <option value=false >
                {{"visibility.archiving_can_not"|translate}}
            </option >
        </select >
        <label for="modificationScope" >
            {{"visibility.archiving_end"|translate}}
        </label >

        <span *ngIf="false == !!config.canModifyAnswers" >
        {{"visibility.modfiy_their"|translate}}
        </span >
        <select
            name="modificationScope"
            id="modificationScope"
            *ngIf="true == !!config.canModifyAnswers"
            [(ngModel)]="config.whoModifiesAnswers"
            [disabled]="false == !!config.canModifyAnswers" >
            <option value="self" >
                {{"visibility.modfiy_their"|translate}}
            </option >
            <option value="everybody" >
                {{"visibility.modfiy_everyone"|translate}}
            </option >
        </select >

    </div >

</section >
<section class="access" >
    <h2 class='title' >
        {{"visibility.access"|translate}}
    </h2 >
    <label for="url" >
        {{"visibility.access_url"|translate}}
        <br >
        {{"visibility.access_url_key"|translate}}
    </label >
    <br >
    <input
        type="name"
        class="input-lg"
        name="url"
        id="url"
        [(ngModel)]="config.customUrl" >

    <sub class="instructions" >
        {{"visibility.access_instructions"|translate}}
    </sub >
    <div class="preview-url" >
        <a [href]="'/#/vote/poll/slug/' + config.customUrl" >
            {{environment.baseHref + '#/vote/poll/slug/' + config.customUrl}}
        </a >
        <framadate-copy-text [textToCopy]='config.urlPublic' ></framadate-copy-text >
    </div >
    <br >
    <label for="passwordAccess" >
        {{"visibility.access_want"|translate}}
    </label >
    <select
        name="passwordAccess"
        id="passwordAccess"
        [(ngModel)]="config.passwordAccess" >
        <option value="0" >  {{"visibility.access_want_no"|translate}}</option >
        <option value="1" >  {{"visibility.access_want_yes"|translate}}</option >
    </select >

    <label for="password" >
        {{"visibility.access_protect"|translate}}
    </label >

    <div
        class="enablepassword"
        *ngIf="config.passwordAccess == 1" >
        <input
            type="password"
            name="password"
            id="password"
            min="8"
            *ngIf="!showCustomPassword"
            [(ngModel)]="config.password" >
        <input
            type="name"
            name="password_visible"
            id="password_visible"
            min="8"
            *ngIf="showCustomPassword"
            [(ngModel)]="config.password" >
        <button
            (click)="showCustomPassword = !showCustomPassword"
            [disabled]="!config.password"
            class="btn btn--default" >
            <i class="fa fa-eye" ></i >
            {{"visibility.see_pass"|translate}}
        </button >
    </div >
</section >

<button
    (click)='submitCreationAndGoToEnd()'
    class="btn btn--primary btn--full"
    i18n="@@confirm" >
    {{"visibility.validate_btn"|translate}}
    <i
        class='fa fa-paper-plane'
        *ngIf="!config.loading" ></i >
    <span
        class="loading"
        *ngIf="config.loading" >
        <i class="fa fa-refresh fa-spin fa-fw" ></i >
    </span >
</button >

<div class="back" >

    <a
        [routerLink]="'/step/answers'"
        class="prev" >
        Retour
    </a >
</div >

./visibility.component.scss

:host {
    h2 {
        margin-top: 1em;
    }
}