.row
.standard-sidebar
.form-group
input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
.form
h2(v-once) {{ $t('filter') }}
h3 {{ this.groupBy === 'type' ? $t('equipmentType') : $t('class') }}
.form-group
.form-check(
v-for="group in itemsGroups",
:key="group.key",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[group.key].selected")
span.custom-control-indicator
span.custom-control-description(v-once) {{ group.label }}
.standard-page
.clearfix
h1.float-left.mb-0.page-header(v-once) {{ $t('equipment') }}
.float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="'Sort 1'", right=true)
b-dropdown-item(href="#") Option 1
b-dropdown-item(href="#") Option 2
b-dropdown-item(href="#") Option 3
span.dropdown-label {{ $t('groupBy2') }}
b-dropdown(:text="$t(groupBy === 'type' ? 'equipmentType' : 'class')", right=true)
b-dropdown-item(@click="groupBy = 'type'", :active="groupBy === 'type'") {{ $t('equipmentType') }}
b-dropdown-item(@click="groupBy = 'class'", :active="groupBy === 'class'") {{ $t('class') }}
drawer(
:title="$t('equipment')",
:errorMessage="(costume && !user.preferences.costume) ? $t('costumeDisabled') : null",
)
div(slot="drawer-header")
.drawer-tab-container
.drawer-tab.text-right
a.drawer-tab-text(
@click="costume = false",
:class="{'drawer-tab-text-active': costume === false}",
) {{ $t('equipment') }}
.clearfix
.drawer-tab.float-left
a.drawer-tab-text(
@click="costume = true",
:class="{'drawer-tab-text-active': costume === true}",
) {{ $t('costume') }}
b-popover(
:triggers="['hover']",
:placement="'top'"
)
span(slot="content")
.popover-content-text {{ $t(drawerPreference+'PopoverText') }}
toggle-switch.float-right(
:label="$t(costume ? 'useCostume' : 'autoEquipBattleGear')",
:checked="user.preferences[drawerPreference]",
@change="changeDrawerPreference",
)
.items.items-one-line(slot="drawer-slider")
item(
v-for="(label, group) in gearTypesToStrings",
:key="group",
:item="flatGear[activeItems[group]]",
:itemContentClass="flatGear[activeItems[group]] ? 'shop_' + flatGear[activeItems[group]].key : null",
:emptyItem="!flatGear[activeItems[group]] || flatGear[activeItems[group]].key.indexOf('_base_0') !== -1",
:label="label",
:popoverPosition="'top'",
)
template(slot="popoverContent", scope="ctx")
equipmentAttributesPopover(:item="ctx.item")
template(slot="itemBadge", scope="ctx")
starBadge(
:selected="true",
:show="!costume || user.preferences.costume",
@click="equip(ctx.item)",
)
div(
v-for="group in itemsGroups",
v-if="viewOptions[group.key].selected",
:key="group.key",
:class='group.key',
)
h2
| {{ group.label }}
span.badge.badge-pill.badge-default {{items[group.key].length}}
.items
item(
v-for="(item, index) in items[group.key]",
v-if="viewOptions[group.key].open || index < itemsPerLine",
:item="item",
:itemContentClass="'shop_' + item.key",
:emptyItem="!item || item.key.indexOf('_base_0') !== -1",
:key="item.key",
)
template(slot="itemBadge", scope="ctx")
starBadge(
:selected="activeItems[ctx.item.type] === ctx.item.key",
:show="!costume || user.preferences.costume",
@click="equip(ctx.item)",
)
template(slot="popoverContent", scope="ctx")
equipmentAttributesPopover(:item="ctx.item")
div(v-if="items[group.key].length === 0")
p(v-once) {{ $t('noGearItemsOfType', { type: group.label }) }}
a.btn.btn-show-more(
v-if="items[group.key].length > itemsPerLine",
@click="viewOptions[group.key].open = !viewOptions[group.key].open"
) {{ viewOptions[group.key].open ? $t('showLessItems', { type: group.label }) : $t('showAllItems', { type: group.label, items: items[group.key].length }) }}