Copy environment

Permissions

<div class="page-title page-title--full-width">
    <div class="h-container">
        <h1 class="page-title__text">Volitused</h1>
    </div>
</div>

<div class="table-filter">
    <div class="h-container">
        <div class="grid grid--middle-xs">
            <div class="grid__col grid__col--lg-7">

                <div class="filter js-filter table-filter__filter">
                    <ul class="filter__list">
                        <li class="filter__list-item">

                            <button class="filter-item js-filter-item is-selected" type="button" data-key="all">
                                <span class="filter-item__inner">
                                    <span class="filter-item__text">Kõik</span>
                                </span>
                            </button>
                        </li>
                        <li class="filter__list-item">

                            <button class="filter-item js-filter-item" type="button" data-key="awaiting">
                                <span class="filter-item__inner">
                                    <span class="filter-item__bullet">
                                        <span class="filter-item__count">2</span>
                                    </span>
                                    <span class="filter-item__text">Kinnituse ootel</span>
                                </span>
                            </button>
                        </li>
                        <li class="filter__list-item">

                            <button class="filter-item js-filter-item" type="button" data-key="in-progress">
                                <span class="filter-item__inner">
                                    <span class="filter-item__bullet">
                                        <span class="filter-item__count">3</span>
                                    </span>
                                    <span class="filter-item__text">Koostamisel</span>
                                </span>
                            </button>
                        </li>
                        <li class="filter__list-item">

                            <button class="filter-item js-filter-item" type="button" data-key="confirmed">
                                <span class="filter-item__inner">
                                    <span class="filter-item__bullet">
                                        <span class="filter-item__count">5</span>
                                    </span>
                                    <span class="filter-item__text">Kinnitatud</span>
                                </span>
                            </button>
                        </li>
                    </ul>
                    <button class="filter__button filter__button--left is-hidden" type="button" aria-label="Scroll left">
                        <svg class="icon  filter__button-icon" focusable="false">
                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
                        </svg>
                    </button>
                    <button class="filter__button filter__button--right is-hidden" type="button" aria-label="Scroll right">
                        <svg class="icon  filter__button-icon" focusable="false">
                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="grid__col grid__col--lg-5">
                <div class="grid grid--middle-xs grid--between-xs grid--start-lg grid--no-wrap-lg">
                    <div class="grid__col grid__col--xs h-hidden-lg">

                        <button class="search-toggle table-filter__search-toggle" type="button">
                            <span class="search-toggle__inner">
                                <svg class="icon  search-toggle__icon search-toggle__icon--closed" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
                                </svg>
                                <svg class="icon  search-toggle__icon search-toggle__icon--open" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
                                </svg>
                                <span class="search-toggle__text">Otsi</span>
                            </span>
                        </button>
                    </div>
                    <div class="grid__col grid__col--xs grid__col--min-lg">

                        <div class="dropdown js-dropdown dropdown--trigger-icon-animated table-filter__dropdown" data-offset-x="0" data-offset-y="0">

                            <button type="button" class="button button--tiny dropdown__trigger button--icon-right">
                                <span class="button__inner">
                                    <svg class="icon  button__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                                    </svg>
                                    <span class="button__text">Lae info alla</span>
                                </span>
                            </button>
                            <div class="dropdown__content">
                                <div class="dropdown__content-inner">
                                    <p>Lae info alla</p>
                                    <ul class="dropdown__options">
                                        <li class="dropdown__option-item">
                                            <a class="dropdown__option-link" href="#">
                                                <svg class="icon  dropdown__option-icon" focusable="false">
                                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#csv"></use>
                                                </svg>
                                                <span class="dropdown__text">CSV</span>
                                            </a>
                                        </li>
                                        <li class="dropdown__option-item">
                                            <a class="dropdown__option-link" href="#">
                                                <svg class="icon  dropdown__option-icon" focusable="false">
                                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#excel"></use>
                                                </svg>
                                                <span class="dropdown__text">Excel</span>
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid__col grid__col--first-lg grid__col--max-lg">

                        <div class="search table-filter__search">
                            <div class="search__inner">
                                <div class="search__textfield-wrapper">

                                    <div class="textfield search__textfield">
                                        <label class="textfield__label  h-visually-hidden" for="search1">
                                            Otsing
                                        </label>
                                        <div class="textfield__inner">
                                            <input class="textfield__input" type="text" id="search1" name="search" placeholder="Otsi arvete hulgast...">
                                        </div>
                                    </div>
                                    <button class="search__clear js-search-clear" type="button" aria-label="Tühjenda">
                                        <span class="search__clear-inner">
                                            <svg class="icon  search__icon" focusable="false">
                                                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                                <button class="search__button search__button--toggle js-search-toggle" type="button" aria-label="Otsi">
                                    <span class="search__button-inner">
                                        <svg class="icon  search__icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
                                        </svg>
                                    </span>
                                </button>
                                <button class="search__button search__button--submit" type="submit" aria-label="Otsi">
                                    <span class="search__button-inner">
                                        <svg class="icon  search__icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
                                        </svg>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="divider divider--xs divider--invisible"></div>
<div class="h-container">
    <h2 class="h4 bold text-base">Kõik volitused</h2>
    <div class="divider divider--xs divider--invisible"></div>
    <div class="status-table  ">
        <table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
            <thead class="status-table__head">
                <tr class="status-table__row">
                    <th class="status-table__header status-table__header--component" scope="col">

                        <div class="check
     check__stat status-table__check--header">
                            <input type="checkbox" id="check-all" name="check" value="" class="check__input" data-tablesaw-checkall>
                            <label for="check-all" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text ">Vali kõik</span>
                            </label>
                        </div>
                    </th>
                    <th class="status-table__header" data-key="kontaktiNr" scope="col">
                        <span class="status-table__title">Kontakti nr</span>
                    </th>
                    <th class="status-table__header" data-key="nimi" scope="col">
                        <span class="status-table__title">Nimi</span>
                    </th>
                    <th class="status-table__header" data-key="isikukood" scope="col">
                        <span class="status-table__title">Isikukood</span>
                    </th>
                    <th class="status-table__header" data-key="email" scope="col">
                        <span class="status-table__title">Email</span>
                    </th>
                    <th class="status-table__header" data-key="telefoniNr" scope="col">
                        <span class="status-table__title">Telefoni nr</span>
                    </th>
                    <th class="status-table__header" data-key="volitusePeriood" scope="col">
                        <span class="status-table__title">Volituse periood</span>
                    </th>
                    <th class="status-table__header" data-key="staatus" scope="col">
                        <span class="status-table__title">Staatus</span>
                    </th>
                    <th class="status-table__header status-table__header--empty" scope="col">
                    </th>
                    <th class="status-table__header status-table__header--component" scope="col">

                        <div class="dropdown js-dropdown status-table__dropdown js-status-table-dropdown" data-offset-x="0" data-offset-y="0">

                            <button type="button" class="button button--text button--text-color status-table__dropdown-button dropdown__trigger button--icon">
                                <span class="button__inner">
                                    <svg class="icon  button__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
                                    </svg>
                                    <span class="button__text">Valikud</span>
                                </span>
                            </button>
                            <div class="dropdown__content">
                                <div class="dropdown__content-inner">
                                    Kuva tabeli veerge

                                    <fieldset class="choice-group
     dropdown__choices">
                                        <legend class="choice-group__label h-visually-hidden">Kuva tabeli veerge</legend>

                                        <div class="choice-group__inner">

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check1" name="check" value="" class="check__input" checked data-key="kontaktiNr">
                                                <label for="check1" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Kontakti nr</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check2" name="check" value="" class="check__input" checked data-key="nimi">
                                                <label for="check2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Nimi</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check3" name="check" value="" class="check__input" checked data-key="isikukood">
                                                <label for="check3" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">isikukood</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check5" name="check" value="" class="check__input" checked data-key="email">
                                                <label for="check5" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">email</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check6" name="check" value="" class="check__input" checked data-key="telefoniNr">
                                                <label for="check6" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Telefoni nr</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check7" name="check" value="" class="check__input" checked data-key="volitusePeriood">
                                                <label for="check7" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Volituse periood</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check8" name="check" value="" class="check__input" checked data-key="staatus">
                                                <label for="check8" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Staatus</span>
                                                </label>
                                            </div>
                                        </div>
                                    </fieldset>

                                </div>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody class="status-table__body">
                <tr class="status-table__row">
                    <td class="status-table__item ">

                        <div class="check
     check__stat status-table__check">
                            <input type="checkbox" id="check-1" name="check" value="" class="check__input">
                            <label for="check-1" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text "></span>
                            </label>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="kontaktiNr">
                        KT213954
                    </td>
                    <td class="status-table__item " data-key="nimi">
                        Risse Soomets
                    </td>
                    <td class="status-table__item " data-key="isikukood">
                        48906091234
                    </td>
                    <td class="status-table__item " data-key="email">
                        <div class="cell-edit js-cell-edit">
                            <div class="cell-edit__inner">
                                <button type="button" class="cell-edit__content js-cell-edit-cell">
                                    <span class="cell-edit__content-inner">
                                        <span class="cell-edit__text ">
                                            risse@nope.ee
                                        </span>
                                        <svg class="icon  cell-edit__icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#edit"></use>
                                        </svg>
                                    </span>
                                </button>
                                <div class="cell-edit__textfield-wrapper js-cell-edit-input">

                                    <div class="textfield cell-edit__textfield">
                                        <label class="textfield__label  h-visually-hidden" for="input1">
                                            Textfield label
                                        </label>
                                        <div class="textfield__inner">
                                            <input class="textfield__input" type="text" id="input1" name="textfield" value="risse@nope.ee">
                                        </div>
                                    </div>
                                    <button type="button" class="cell-edit__button js-cell-edit-button">
                                        <span class="cell-edit__button-inner">
                                            <span class="cell-edit__button-text">text</span>
                                            <svg class="icon  cell-edit__button-icon" focusable="false">
                                                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="telefoniNr">
                        <div class="cell-edit js-cell-edit">
                            <div class="cell-edit__inner">
                                <button type="button" class="cell-edit__content js-cell-edit-cell">
                                    <span class="cell-edit__content-inner">
                                        <span class="cell-edit__text ">
                                            +372 53583059
                                        </span>
                                        <svg class="icon  cell-edit__icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#edit"></use>
                                        </svg>
                                    </span>
                                </button>
                                <div class="cell-edit__textfield-wrapper js-cell-edit-input">

                                    <div class="textfield cell-edit__textfield">
                                        <label class="textfield__label  h-visually-hidden" for="input2">
                                            Textfield label
                                        </label>
                                        <div class="textfield__inner">
                                            <input class="textfield__input" type="text" id="input2" name="textfield" value="+372 53583059">
                                        </div>
                                    </div>
                                    <button type="button" class="cell-edit__button js-cell-edit-button">
                                        <span class="cell-edit__button-inner">
                                            <span class="cell-edit__button-text">text</span>
                                            <svg class="icon  cell-edit__button-icon" focusable="false">
                                                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="volitusePeriood">
                        15.06.22 - 31.12.22
                    </td>
                    <td class="status-table__item " data-key="staatus">
                        <div class="status status--type-success">
                            <span class="status__bullet"></span>
                            <span class="status__text">Kehtiv</span>
                        </div>
                    </td>
                    <td class="status-table__item " data-tablesaw-no-labels>

                        <button type="button" class="button button--tiny status-table__button">
                            <span class="button__inner">
                                <span class="button__text">Uuenda</span>
                            </span>
                        </button>
                    </td>
                </tr>
                <tr class="status-table__row">
                    <td class="status-table__item ">

                        <div class="check
     check__stat status-table__check">
                            <input type="checkbox" id="check-2" name="check" value="" class="check__input">
                            <label for="check-2" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text "></span>
                            </label>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="kontaktiNr">
                        KT213953
                    </td>
                    <td class="status-table__item " data-key="nimi">
                        Kristel-Maria Ka...
                    </td>
                    <td class="status-table__item " data-key="isikukood">
                        48906091234
                    </td>
                    <td class="status-table__item " data-key="email">
                        kristel@nope.ee
                    </td>
                    <td class="status-table__item " data-key="telefoniNr">
                        +372 53583059
                    </td>
                    <td class="status-table__item " data-key="volitusePeriood">
                        15.06.22 - Tähtajatu
                    </td>
                    <td class="status-table__item " data-key="staatus">
                        <div class="status status--type-success">
                            <span class="status__bullet"></span>
                            <span class="status__text">Tähtajatu</span>
                        </div>
                    </td>
                    <td class="status-table__item " data-tablesaw-no-labels>

                        <button type="button" class="button button--tiny status-table__button">
                            <span class="button__inner">
                                <span class="button__text">Uuenda</span>
                            </span>
                        </button>
                    </td>
                </tr>
                <tr class="status-table__row">
                    <td class="status-table__item ">

                        <div class="check
     check__stat status-table__check">
                            <input type="checkbox" id="check-3" name="check" value="" class="check__input">
                            <label for="check-3" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text "></span>
                            </label>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="kontaktiNr">
                        KT213953
                    </td>
                    <td class="status-table__item " data-key="nimi">
                        Greete Tukk
                    </td>
                    <td class="status-table__item " data-key="isikukood">
                        48906091234
                    </td>
                    <td class="status-table__item " data-key="email">
                        greete@nope.ee
                    </td>
                    <td class="status-table__item " data-key="telefoniNr">
                        +372 53583059
                    </td>
                    <td class="status-table__item " data-key="volitusePeriood">
                        15.06.22 - Tähtajatu
                    </td>
                    <td class="status-table__item " data-key="staatus">
                        <div class="status status--type-success">
                            <span class="status__bullet"></span>
                            <span class="status__text">Tähtajatu</span>
                        </div>
                    </td>
                    <td class="status-table__item ">
                        <div class="h-text-center">Admin</div>
                    </td>
                </tr>
                <tr class="status-table__row">
                    <td class="status-table__item ">

                        <div class="check
     check__stat status-table__check">
                            <input type="checkbox" id="check-4" name="check" value="" class="check__input">
                            <label for="check-4" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text "></span>
                            </label>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="kontaktiNr">
                        KT213956
                    </td>
                    <td class="status-table__item " data-key="nimi">
                        Nele Erikson
                    </td>
                    <td class="status-table__item " data-key="isikukood">
                        48906091234
                    </td>
                    <td class="status-table__item " data-key="email">
                        nele@nope.ee
                    </td>
                    <td class="status-table__item " data-key="telefoniNr">
                        +372 53583059
                    </td>
                    <td class="status-table__item " data-key="volitusePeriood">
                        15.06.22 - 31.12.22
                    </td>
                    <td class="status-table__item " data-key="staatus">
                        <div class="status status--type-success">
                            <span class="status__bullet"></span>
                            <span class="status__text">Kehtiv</span>
                        </div>
                    </td>
                    <td class="status-table__item ">
                        <div class="h-text-center">Admin</div>
                    </td>
                </tr>
                <tr class="status-table__row">
                    <td class="status-table__item ">

                        <div class="check
     check__stat status-table__check">
                            <input type="checkbox" id="check-5" name="check" value="" class="check__input">
                            <label for="check-5" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text "></span>
                            </label>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="kontaktiNr">
                        KT213957
                    </td>
                    <td class="status-table__item " data-key="nimi">
                        Hanna Milk
                    </td>
                    <td class="status-table__item " data-key="isikukood">
                        48906091234
                    </td>
                    <td class="status-table__item " data-key="email">
                        hanna@nope.ee
                    </td>
                    <td class="status-table__item " data-key="telefoniNr">
                        +372 53583059
                    </td>
                    <td class="status-table__item " data-key="volitusePeriood">
                        15.06.22 - 31.10.22
                    </td>
                    <td class="status-table__item " data-key="staatus">
                        <div class="status status--type-error">
                            <span class="status__bullet"></span>
                            <span class="status__text">Aegunud</span>
                        </div>
                    </td>
                    <td class="status-table__item " data-tablesaw-no-labels>

                        <button type="button" class="button button--tiny status-table__button">
                            <span class="button__inner">
                                <span class="button__text">Uuenda</span>
                            </span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="divider divider--xxs divider--invisible"></div>
    <div class="grid grid--end-xs">
        <div class="grid__col grid__col--sm">

            <button type="button" class="button button--block-xs button--tiny button--icon-left">
                <span class="button__inner">
                    <svg class="icon  button__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#plus"></use>
                    </svg>
                    <span class="button__text">Lisa volitatud isik</span>
                </span>
            </button>
        </div>
    </div>
    <div class="divider divider--md divider--invisible"></div>

    <h2 class="h4 bold text-base">Arhiveeritud volitused</h2>
    <div class="divider divider--xs divider--invisible"></div>
    <div class="status-table  ">
        <table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
            <thead class="status-table__head">
                <tr class="status-table__row">
                    <th class="status-table__header status-table__header--component" scope="col">

                        <div class="check
     check__stat status-table__check--header">
                            <input type="checkbox" id="check-all-2" name="check" value="" class="check__input" data-tablesaw-checkall>
                            <label for="check-all-2" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text ">Vali kõik</span>
                            </label>
                        </div>
                    </th>
                    <th class="status-table__header" data-key="kontaktiNr2" scope="col">
                        <span class="status-table__title">Kontakti nr</span>
                    </th>
                    <th class="status-table__header" data-key="nimi2" scope="col">
                        <span class="status-table__title">Nimi</span>
                    </th>
                    <th class="status-table__header" data-key="isikukood2" scope="col">
                        <span class="status-table__title">Isikukood</span>
                    </th>
                    <th class="status-table__header" data-key="email2" scope="col">
                        <span class="status-table__title">Email</span>
                    </th>
                    <th class="status-table__header" data-key="telefoniNr2" scope="col">
                        <span class="status-table__title">Telefoni nr</span>
                    </th>
                    <th class="status-table__header" data-key="volitusePeriood2" scope="col">
                        <span class="status-table__title">Volituse periood</span>
                    </th>
                    <th class="status-table__header" data-key="staatus2" scope="col">
                        <span class="status-table__title">Staatus</span>
                    </th>
                    <th class="status-table__header status-table__header--empty" scope="col">
                    </th>
                    <th class="status-table__header status-table__header--component" scope="col">

                        <div class="dropdown js-dropdown status-table__dropdown js-status-table-dropdown" data-offset-x="0" data-offset-y="0">

                            <button type="button" class="button button--text button--text-color status-table__dropdown-button dropdown__trigger button--icon">
                                <span class="button__inner">
                                    <svg class="icon  button__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
                                    </svg>
                                    <span class="button__text">Valikud</span>
                                </span>
                            </button>
                            <div class="dropdown__content">
                                <div class="dropdown__content-inner">
                                    Kuva tabeli veerge

                                    <fieldset class="choice-group
     dropdown__choices">
                                        <legend class="choice-group__label h-visually-hidden">Kuva tabeli veerge</legend>

                                        <div class="choice-group__inner">

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check1-2" name="check" value="" class="check__input" checked data-key="kontaktiNr2">
                                                <label for="check1-2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Kontakti nr</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check2-2" name="check" value="" class="check__input" checked data-key="nimi2">
                                                <label for="check2-2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Nimi</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check3-2" name="check" value="" class="check__input" checked data-key="isikukood2">
                                                <label for="check3-2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">isikukood</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check5-2" name="check" value="" class="check__input" checked data-key="email2">
                                                <label for="check5-2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">email</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check6-2" name="check" value="" class="check__input" checked data-key="telefoniNr2">
                                                <label for="check6-2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Telefoni nr</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check7-2" name="check" value="" class="check__input" checked data-key="volitusePeriood2">
                                                <label for="check7-2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Volituse periood</span>
                                                </label>
                                            </div>

                                            <div class="check
     choice-group__item">
                                                <input type="checkbox" id="check8-2" name="check" value="" class="check__input" checked data-key="staatus2">
                                                <label for="check8-2" class="check__label">
                                                    <span class="check__indicator">
                                                        <svg class="icon  check__icon" focusable="false">
                                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                                        </svg>
                                                    </span>
                                                    <span class="check__text ">Staatus</span>
                                                </label>
                                            </div>
                                        </div>
                                    </fieldset>

                                </div>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody class="status-table__body">
                <tr class="status-table__row">
                    <td class="status-table__item ">

                        <div class="check
     check__stat status-table__check">
                            <input type="checkbox" id="check-1-1" name="check" value="" class="check__input">
                            <label for="check-1-1" class="check__label">
                                <span class="check__indicator">
                                    <svg class="icon  check__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                    </svg>
                                </span>
                                <span class="check__text "></span>
                            </label>
                        </div>
                    </td>
                    <td class="status-table__item " data-key="kontaktiNr2">
                        KT212511
                    </td>
                    <td class="status-table__item " data-key="nimi2">
                        Peeter Paan
                    </td>
                    <td class="status-table__item " data-key="isikukood2">
                        48906091234
                    </td>
                    <td class="status-table__item " data-key="email2">
                        peeter@nope.ee
                    </td>
                    <td class="status-table__item " data-key="telefoniNr2">
                        +372 53583059
                    </td>
                    <td class="status-table__item " data-key="volitusePeriood2">
                        15.06.22 - 31.12.22
                    </td>
                    <td class="status-table__item " data-key="staatus2">
                        <div class="status status--type-inactive">
                            <span class="status__bullet"></span>
                            <span class="status__text">Arhiveeritud</span>
                        </div>
                    </td>
                    <td class="status-table__item " data-tablesaw-no-labels>

                        <button type="button" class="button button--tiny status-table__button">
                            <span class="button__inner">
                                <span class="button__text">Uuenda</span>
                            </span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="divider divider--md divider--invisible"></div>
</div>
{% include '@page-title' with { class: '', modifier: '', isFullWidth: true, data: { title: data.title } } %}
{% include '@table-filter' with { class: '', modifier: '', data: data.filter } %}
{% include '@divider' with { modifier: 'divider--xs divider--invisible' } %}
<div class="h-container">
    {% if data.table %}
        <h2 class="h4 bold text-base">Kõik volitused</h2>
        {% include '@divider' with { modifier: 'divider--xs divider--invisible' } %}
        {% include '@status-table' with { class: '', modifier: '', data: data.table } %}
            {% include '@divider' with { modifier: 'divider--xxs divider--invisible' } %}
        <div class="grid grid--end-xs">
            <div class="grid__col grid__col--sm">
                {% include '@button' with { class: '', modifier: 'button--block-xs button--tiny', data: data.newPermission } %}
            </div>
        </div>
        {% include '@divider' with { modifier: 'divider--md divider--invisible' } %}
    {% endif %}

    {% if data.archiveTable %}
        <h2 class="h4 bold text-base">Arhiveeritud volitused</h2>
        {% include '@divider' with { modifier: 'divider--xs divider--invisible' } %}
        {% include '@status-table' with { class: '', modifier: '', data: data.archiveTable } %}
        {% include '@divider' with { modifier: 'divider--md divider--invisible' } %}
    {% endif %}
</div>
{
  "language": "en-US",
  "data": {
    "title": "Volitused",
    "filter": {
      "filter": {
        "items": [
          {
            "key": "all",
            "isSelected": true,
            "text": "Kõik"
          },
          {
            "key": "awaiting",
            "text": "Kinnituse ootel",
            "count": 2
          },
          {
            "key": "in-progress",
            "text": "Koostamisel",
            "count": 3
          },
          {
            "key": "confirmed",
            "text": "Kinnitatud",
            "count": 5
          }
        ]
      },
      "search": {
        "textfield": {
          "label": "Otsing",
          "id": "search1",
          "name": "search",
          "placeholder": "Otsi arvete hulgast...",
          "isLabelHidden": true
        },
        "clearText": "Tühjenda",
        "searchText": "Otsi",
        "submitText": "Otsi"
      },
      "dropdown": {
        "buttonModifier": "button--tiny",
        "trigger": {
          "text": "Lae info alla",
          "icon": "chevron-bottom",
          "iconPosition": "right"
        },
        "triggerIconAnimated": true,
        "content": "<p>Lae info alla</p>",
        "options": [
          {
            "url": "#",
            "icon": "csv",
            "text": "CSV"
          },
          {
            "url": "#",
            "icon": "excel",
            "text": "Excel"
          }
        ]
      },
      "searchToggle": {
        "text": "Otsi"
      }
    },
    "newPermission": {
      "text": "Lisa volitatud isik",
      "icon": "plus",
      "iconPosition": "left"
    },
    "table": {
      "headers": [
        {
          "component": "check",
          "componentData": {
            "id": "check-all",
            "name": "check",
            "label": "Vali kõik",
            "componentClass": "status-table__check--header",
            "modifier": "check__stat",
            "attributes": "data-tablesaw-checkall"
          }
        },
        {
          "label": "Kontakti nr",
          "key": "kontaktiNr"
        },
        {
          "label": "Nimi",
          "key": "nimi"
        },
        {
          "label": "Isikukood",
          "key": "isikukood"
        },
        {
          "label": "Email",
          "key": "email"
        },
        {
          "label": "Telefoni nr",
          "key": "telefoniNr"
        },
        {
          "label": "Volituse periood",
          "key": "volitusePeriood"
        },
        {
          "label": "Staatus",
          "key": "staatus"
        },
        {
          "label": ""
        },
        {
          "component": "dropdown",
          "componentData": {
            "componentClass": "status-table__dropdown js-status-table-dropdown",
            "buttonModifier": "button--text button--text-color status-table__dropdown-button",
            "trigger": {
              "text": "Valikud",
              "icon": "dots",
              "iconPosition": null
            },
            "triggerIconAnimated": false,
            "content": "Kuva tabeli veerge",
            "options": null,
            "choices": {
              "label": "Kuva tabeli veerge",
              "type": "check",
              "choices": [
                {
                  "id": "check1",
                  "label": "Kontakti nr",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"kontaktiNr\""
                },
                {
                  "id": "check2",
                  "label": "Nimi",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"nimi\""
                },
                {
                  "id": "check3",
                  "label": "isikukood",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"isikukood\""
                },
                {
                  "id": "check5",
                  "label": "email",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"email\""
                },
                {
                  "id": "check6",
                  "label": "Telefoni nr",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"telefoniNr\""
                },
                {
                  "id": "check7",
                  "label": "Volituse periood",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"volitusePeriood\""
                },
                {
                  "id": "check8",
                  "label": "Staatus",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"staatus\""
                }
              ],
              "isLabelHidden": true
            }
          }
        }
      ],
      "rows": [
        {
          "cells": [
            {
              "component": "check",
              "componentData": {
                "id": "check-1",
                "name": "check",
                "componentClass": "status-table__check",
                "modifier": "check__stat"
              }
            },
            {
              "content": "KT213954",
              "key": "kontaktiNr"
            },
            {
              "content": "Risse Soomets",
              "key": "nimi"
            },
            {
              "content": "48906091234",
              "key": "isikukood"
            },
            {
              "component": "cell-edit",
              "componentData": {
                "text": "risse@nope.ee",
                "textfield": {
                  "label": "Textfield label",
                  "id": "input1",
                  "name": "textfield",
                  "isLabelHidden": true
                },
                "buttonText": "text"
              },
              "key": "email"
            },
            {
              "component": "cell-edit",
              "componentData": {
                "text": "+372 53583059",
                "textfield": {
                  "label": "Textfield label",
                  "id": "input2",
                  "name": "textfield",
                  "isLabelHidden": true
                },
                "buttonText": "text"
              },
              "key": "telefoniNr"
            },
            {
              "content": "15.06.22 - 31.12.22",
              "key": "volitusePeriood"
            },
            {
              "component": "status",
              "componentData": {
                "text": "Kehtiv",
                "type": "success"
              },
              "key": "staatus"
            },
            {
              "component": "button",
              "componentData": {
                "componentClass": "status-table__button",
                "modifier": "button--tiny",
                "text": "Uuenda"
              }
            }
          ]
        },
        {
          "cells": [
            {
              "component": "check",
              "componentData": {
                "id": "check-2",
                "name": "check",
                "componentClass": "status-table__check",
                "modifier": "check__stat"
              }
            },
            {
              "content": "KT213953",
              "key": "kontaktiNr"
            },
            {
              "content": "Kristel-Maria Ka...",
              "key": "nimi"
            },
            {
              "content": "48906091234",
              "key": "isikukood"
            },
            {
              "content": "kristel@nope.ee",
              "key": "email"
            },
            {
              "content": "+372 53583059",
              "key": "telefoniNr"
            },
            {
              "content": "15.06.22 - Tähtajatu",
              "key": "volitusePeriood"
            },
            {
              "component": "status",
              "componentData": {
                "text": "Tähtajatu",
                "type": "success"
              },
              "key": "staatus"
            },
            {
              "component": "button",
              "componentData": {
                "componentClass": "status-table__button",
                "modifier": "button--tiny",
                "text": "Uuenda"
              }
            }
          ]
        },
        {
          "cells": [
            {
              "component": "check",
              "componentData": {
                "id": "check-3",
                "name": "check",
                "componentClass": "status-table__check",
                "modifier": "check__stat"
              }
            },
            {
              "content": "KT213953",
              "key": "kontaktiNr"
            },
            {
              "content": "Greete Tukk",
              "key": "nimi"
            },
            {
              "content": "48906091234",
              "key": "isikukood"
            },
            {
              "content": "greete@nope.ee",
              "key": "email"
            },
            {
              "content": "+372 53583059",
              "key": "telefoniNr"
            },
            {
              "content": "15.06.22 - Tähtajatu",
              "key": "volitusePeriood"
            },
            {
              "component": "status",
              "componentData": {
                "text": "Tähtajatu",
                "type": "success"
              },
              "key": "staatus"
            },
            {
              "content": "<div class=\"h-text-center\">Admin</div>"
            }
          ]
        },
        {
          "cells": [
            {
              "component": "check",
              "componentData": {
                "id": "check-4",
                "name": "check",
                "componentClass": "status-table__check",
                "modifier": "check__stat"
              }
            },
            {
              "content": "KT213956",
              "key": "kontaktiNr"
            },
            {
              "content": "Nele Erikson",
              "key": "nimi"
            },
            {
              "content": "48906091234",
              "key": "isikukood"
            },
            {
              "content": "nele@nope.ee",
              "key": "email"
            },
            {
              "content": "+372 53583059",
              "key": "telefoniNr"
            },
            {
              "content": "15.06.22 - 31.12.22",
              "key": "volitusePeriood"
            },
            {
              "component": "status",
              "componentData": {
                "text": "Kehtiv",
                "type": "success"
              },
              "key": "staatus"
            },
            {
              "content": "<div class=\"h-text-center\">Admin</div>"
            }
          ]
        },
        {
          "cells": [
            {
              "component": "check",
              "componentData": {
                "id": "check-5",
                "name": "check",
                "componentClass": "status-table__check",
                "modifier": "check__stat"
              }
            },
            {
              "content": "KT213957",
              "key": "kontaktiNr"
            },
            {
              "content": "Hanna Milk",
              "key": "nimi"
            },
            {
              "content": "48906091234",
              "key": "isikukood"
            },
            {
              "content": "hanna@nope.ee",
              "key": "email"
            },
            {
              "content": "+372 53583059",
              "key": "telefoniNr"
            },
            {
              "content": "15.06.22 - 31.10.22",
              "key": "volitusePeriood"
            },
            {
              "component": "status",
              "componentData": {
                "text": "Aegunud",
                "type": "error"
              },
              "key": "staatus"
            },
            {
              "component": "button",
              "componentData": {
                "componentClass": "status-table__button",
                "modifier": "button--tiny",
                "text": "Uuenda"
              }
            }
          ]
        }
      ]
    },
    "archiveTable": {
      "headers": [
        {
          "component": "check",
          "componentData": {
            "id": "check-all-2",
            "name": "check",
            "label": "Vali kõik",
            "componentClass": "status-table__check--header",
            "modifier": "check__stat",
            "attributes": "data-tablesaw-checkall"
          }
        },
        {
          "label": "Kontakti nr",
          "key": "kontaktiNr2"
        },
        {
          "label": "Nimi",
          "key": "nimi2"
        },
        {
          "label": "Isikukood",
          "key": "isikukood2"
        },
        {
          "label": "Email",
          "key": "email2"
        },
        {
          "label": "Telefoni nr",
          "key": "telefoniNr2"
        },
        {
          "label": "Volituse periood",
          "key": "volitusePeriood2"
        },
        {
          "label": "Staatus",
          "key": "staatus2"
        },
        {
          "label": ""
        },
        {
          "component": "dropdown",
          "componentData": {
            "componentClass": "status-table__dropdown js-status-table-dropdown",
            "buttonModifier": "button--text button--text-color status-table__dropdown-button",
            "trigger": {
              "text": "Valikud",
              "icon": "dots",
              "iconPosition": null
            },
            "triggerIconAnimated": false,
            "content": "Kuva tabeli veerge",
            "options": null,
            "choices": {
              "label": "Kuva tabeli veerge",
              "type": "check",
              "choices": [
                {
                  "id": "check1-2",
                  "label": "Kontakti nr",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"kontaktiNr2\""
                },
                {
                  "id": "check2-2",
                  "label": "Nimi",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"nimi2\""
                },
                {
                  "id": "check3-2",
                  "label": "isikukood",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"isikukood2\""
                },
                {
                  "id": "check5-2",
                  "label": "email",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"email2\""
                },
                {
                  "id": "check6-2",
                  "label": "Telefoni nr",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"telefoniNr2\""
                },
                {
                  "id": "check7-2",
                  "label": "Volituse periood",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"volitusePeriood2\""
                },
                {
                  "id": "check8-2",
                  "label": "Staatus",
                  "isChecked": true,
                  "name": "check",
                  "attributes": "data-key=\"staatus2\""
                }
              ],
              "isLabelHidden": true
            }
          }
        }
      ],
      "rows": [
        {
          "cells": [
            {
              "component": "check",
              "componentData": {
                "id": "check-1-1",
                "name": "check",
                "componentClass": "status-table__check",
                "modifier": "check__stat"
              }
            },
            {
              "content": "KT212511",
              "key": "kontaktiNr2"
            },
            {
              "content": "Peeter Paan",
              "key": "nimi2"
            },
            {
              "content": "48906091234",
              "key": "isikukood2"
            },
            {
              "content": "peeter@nope.ee",
              "key": "email2"
            },
            {
              "content": "+372 53583059",
              "key": "telefoniNr2"
            },
            {
              "content": "15.06.22 - 31.12.22",
              "key": "volitusePeriood2"
            },
            {
              "component": "status",
              "componentData": {
                "text": "Arhiveeritud",
                "type": "inactive"
              },
              "key": "staatus2"
            },
            {
              "component": "button",
              "componentData": {
                "componentClass": "status-table__button",
                "modifier": "button--tiny",
                "text": "Uuenda"
              }
            }
          ]
        }
      ]
    }
  }
}