<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"
}
}
]
}
]
}
}
}