{% extends "@base/layouts/backend.twig" %}
{% import "@base/macros/options.twig" as options %}
{% block head %}


{% endblock %}

{% block mainHeader %}
	<ul id="mbsGroupsTblNavBtnsShell" class="supsystic-bar-controls">
		<div class="row">
			<div class="col-md-2">
				<button class="sc-button primary" id="mbsGroupsTblRemoveGroupBtn" >
					<i class="fa fa-fw fa-trash-o"></i>
					{{ translate('Delete') }}
				</button>
			</div>
			<div class="col-md-3">
				<select class="bulk-actions">
					<option value="">{{ translate('Bulk Actions') }}</option>
					<option value="changeStatus">{{ translate('Change Group Status') }}</option>
					{#<option value="deleteGroup">{{ translate('Delete Group') }}</option>#}
				</select>
			</div>
			<div class="col-md-2 changeStatus bulk-actions-list" style="display: none">
				<select class="">
						<option value="active">{{ translate('Active') }}</option>
						<option value="blocked">{{ translate('Blocked') }}</option>
				</select>
			</div>
			<div class="col-md-2 bulk-actions-apply-button" style="display: none">
				<button class="sc-button primary" >
					<span>{{ translate('Apply') }}</span>
				</button>
			</div>

			<input id="mbsGroupsTblSearchTxt" type="text" name="tbl_search" placeholder="{{ translate('Search') }}">
		</div>
	</ul>


{% endblock %}

{% block main %}

    {% import "@base/macros/options.twig" as options %}
	<section data-switch-content="groups-edit">

		<div id="mbsGroupsTblNavShell" class="supsystic-tbl-pagination-shell"></div>
		<div style="clear: both;"></div>
		<hr />
		<table id="mbsGroupsTbl"></table>
		<div id="mbsGroupsTblNav"></div>
		{#<div id="mbsGroupsTblEmptyMsg" style="display: none;">#}
			{#<h3>{{ translate('You have no Groups for now. %s your first Group!')#}
                {#| format('<a href="#" onclick="Membership.switchWnd(\'badges-edit\');return false;" style="font-style: italic; text-decoration: underline;" class="mbsCreateLelvelBtn">' ~ translate('Create') ~ '</a>')#}
                {#| raw }}</h3>#}
		{#</div>#}
		<div id="mbsGroupsTblEmptyMsg" style="display: none;">
			<h3>{{ translate('You have no Groups for now.')
                | format('<a href="#" onclick="Membership.switchWnd(\'badges-edit\');return false;" style="font-style: italic; text-decoration: underline;" class="mbsCreateLelvelBtn">' ~ translate('Create') ~ '</a>')
                | raw }}</h3>
		</div>
		<div style="clear: both;"></div>
	</section>
	<div class="sc-switch-wnd" data-switch="groups-edit">
		<form id="mbsMembershipGroupsFrm">
			<div class="mp-options">
				<button class="sc-button primary mbsBackGroupssBtn">
					<i class="fa fa-fw fa-angle-double-left"></i>
                    {{ translate('Back') }}
				</button>
                {{ options.saveButton(translate('Save'), 'mbsSaveGroupssBtn') }}
				<h3>{{ translate('Main') }}</h3>
                {{ options.inputRow(translate('Name'), 'name') }}
                {{ options.inputRow(translate('Caption'), 'caption') }}
				<div class="mp-option">
					<div class="row">
						<div class="col-md-4">
                            {{ options.label(translate('Badge img')) }}
						</div>
						<div class="col-md-8">
							<div class="mp-option-input">
								<div class="mp-option-input">
									<div class="mp-default-image">
										<img class="img_src" style="max-width:50px;max-height: 50px; display: none" src="">
										<button class="mp-option-button sc-button primary mp-change">{{ translate('Change') }}</button>
										<button class="mp-option-button sc-button primary mp-set-to-default mp-remove-info"
										>{{ translate('Remove') }}</button>
                                        {{ options.hiddenInput('img_id') }}
                                        {{ options.hiddenInput('img_src') }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
                {{ options.hiddenInput('id') }}
                {{ options.saveButtonRow(translate('Save'), '', '', 'mbsSaveGroupsBtn') }}
			</div>
		</form>
	</div>


{% endblock %}