<div class="o-container" style="padding: 20px 20px 20px 0">
	<h1 class="c-heading u-super">JQUEST Settings</h1>
	<form method="post" action="{{ action_url }}">
		{{ function( 'wp_nonce_field', menu_slug, menu_slug ~ '_nonce' ) }}

		{% for name, option in options %}
			<div class="o-form-element">
				<label class="c-label" for="{{ name }}">{{ option.label }}</label>
				<input class="c-field" style="max-width: 300px;" type="text" name="{{ name }}" id="{{ name }}" value="{{ option.value }}" />
			</div>
		{% endfor %}
		<button type="submit" class="c-button c-button--info u-large">
			Save
		</button>
	</form>

	<form method="post" action="{{ action_url_2 }}">
		{{ function( 'wp_nonce_field', menu_slug, menu_slug ~ '_nonce' ) }}
		<button type="submit" class="c-button c-button--info u-large" style="margin-top: 1rem">Refresh Games</button>
	</form>

</div>
<div class="o-container" style="padding: 20px 20px 20px 0">
	{% if organization_message %}
		<blaze-alert open type="warning">{{ organization_message }}</blaze-alert>
	{% endif %}

	{% if organization_games %}
		<div class="c-card">
			<div class="c-card__header">
				<h2 class="c-heading">Organization Games</h2>
			</div>
			<div class="c-card__body">
				<div class="c-card__item__content">
					<ul class="c-list">
					{% for game in organization_games %}
						<li class="c-list__item">{{ game.title }}</li>
					{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	{% endif %}
</div>
