.row
.col-2.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' ? 'Type' : $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) {{ $t(group.label) }}
.col-10.standard-page
.clearfix
h1.float-left.mb-0.page-header(v-once) {{ $t('equipment') }}
.float-right
b-dropdown(text="Sort by", right=true)
b-dropdown-item(href="#") Option 1
b-dropdown-item(href="#") Option 2
b-dropdown-item(href="#") Option 3
b-dropdown(text="Group by", right=true)
b-dropdown-item(@click="groupBy = 'type'", :class="{'dropdown-item-active': groupBy === 'type'}") Type
b-dropdown-item(@click="groupBy = 'class'", :class="{'dropdown-item-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-title {{ $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",
:showPopover="!!flatGear[activeItems[group]] && flatGear[activeItems[group]].key.indexOf('_base_0') === -1",
:label="$t(label)",
:selected="true",
:popoverPosition="'top'",
:starVisible="!costume || user.preferences.costume",
@click="equip",
)
template(slot="popoverContent", scope="ctx")
equipmentAttributesPopover(:item="ctx.item")
div(
v-for="group in itemsGroups",
v-if="viewOptions[group.key].selected",
:key="group.key",
)
h2
| {{ $t(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",
:showPopover="item && item.key.indexOf('_base_0') === -1",
:key="item.key",
:selected="activeItems[item.type] === item.key",
:starVisible="!costume || user.preferences.costume",
@click="equip",
)
template(slot="popoverContent", scope="ctx")
equipmentAttributesPopover(:item="ctx.item")
div(v-if="items[group.key].length === 0")
p(v-once) {{ $t('noGearItemsOfType', { type: $t(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('showLessGearItems', { type: $t(group.label) }) : $t('showAllGearItems', { type: $t(group.label), items: items[group.key].length }) }}