{% include 'mcp_header.html' %}
{% INCLUDECSS '@phpbb_cannedmessages/cannedmessages.css' %}

<h2 class="leading-6">{{ lang('MCP_CANNEDMESSAGES_MANAGE') }}</h2>
{% if S_CANNEDMESSAGE_ADD_OR_EDIT %}
  <p class="mt-1 text-sm text-secondary">{{ lang('CANNEDMESSAGES_EXPLAIN_ADD_EDIT') }}</p>

	{% if S_ERROR %}
	<div class="text-sm text-red-700 bg-red-50 border border-red-300 rounded-lg p-4 dark:text-red-400 dark:bg-red-800/10 dark:border-red-500 my-4" role="alert">
		<div class="error">
      <h3>{{ lang('ERROR') }}</h3>
			<p>{{ ERROR_MSG }}</p>
    </div>
	</div>
	{% endif %}

	<form name="cannedmessage_add_edit" id="cannedmessage_add_edit" method="post" action="{{ U_ACTION }}">
    <div class="mt-4 divide-y">
  		<dl class="py-4 md:grid md:grid-cols-3 md:gap-5 items-center">
  			<dt class="text-sm font-medium leading-6"><label for="cannedmessage_name">{{ lang('CANNEDMESSAGE_NAME') ~ lang('COLON') }}</label></dt>
  			<dd class="text-sm md:col-span-2 max-md:mt-2">
  				<input name="cannedmessage_name" id="cannedmessage_name" type="text" class="inputbox" maxlength="255" value="{{ CANNESMESSAGE_NAME }}" />
  			</dd>
  		</dl>
      <dl class="py-4 md:grid md:grid-cols-3 md:gap-5">
  			<dt class="text-sm font-medium leading-6"><label for="cannedmessage_parent">{{ lang('CANNEDMESSAGE_PARENT') ~ lang('COLON') }}</label></dt>
  			<dd class="text-sm md:col-span-2 max-md:mt-2">
  				<select class="inputbox" name="cannedmessage_parent" id="cannedmessage_parent">
						<option value="0">{{ lang('NO_PARENT') }}</option>
						{% include '@phpbb_cannedmessages/cannedmessage_list.html' %}
					</select>
  			</dd>
  		</dl>
      <dl class="py-4 md:grid md:grid-cols-3 md:gap-5 items-center">
  			<dt class="text-sm font-medium leading-6"><label for="is_cat1">{{ lang('CANNEDMESSAGE_IS_CAT') ~ lang('COLON') }}</label></dt>
  			<dd class="text-sm md:col-span-2 max-md:mt-2">
  				<div class="flex max-md:flex-col">
  					<label class="radio-label"><input type="radio" name="is_cat" id="is_cat1" class="radio-primary" value="1"<!-- IF IS_CAT --> checked="checked"<!-- ENDIF -->> {L_YES}</label>
  					<label class="radio-label"><input type="radio" name="is_cat" id="is_cat0" class="radio-primary" value="0"<!-- IF not IS_CAT --> checked="checked"<!-- ENDIF -->> {L_NO}</label>
  				</div>
  			</dd>
  		</dl>
      <dl class="py-4 md:grid md:grid-cols-3 md:gap-5" id="cannedmessage_content_section"{% if IS_CAT %} style="display: none;"{% endif %}>
  			<dt class="text-sm font-medium leading-6"><label for="cannedmessage_add_edit">{{ lang('CANNEDMESSAGE_CONTENT') ~ lang('COLON') }}</label></dt>
  			<dd class="text-sm md:col-span-2 max-md:mt-2">
					{% include 'posting_buttons.html' %}
					<textarea name="cannedmessage_content" id="cannedmessage_content" class="inputbox mt-2" cols="40" rows="15">{{ CANNEDMESSAGE_CONTENT }}</textarea>
  			</dd>
  		</dl>
      {% if CANNEDMESSAGE_CONTENT_PREVIEW %}
			<dl id="cannedmessage_preview" class="pt-3">
				<dt class="text-sm font-medium leading-6 mb-2"><label>{{ lang('PREVIEW') ~ lang('COLON') }}</label></dt>
				<dd>
					<div class="card p-4 inputbox">
						<div class="postbody">
							<div class="content">{{ CANNEDMESSAGE_CONTENT_PREVIEW }}</div>
						</div>
					</div>
				</dd>
			</dl>
			{% endif %}
    </div>

    <div class="submit-buttons flex max-md:flex-col items-center justify-center gap-2 my-4">
			<button type="submit" name="preview" id="preview" value="{{ lang('PREVIEW') }}" class="btn-primary ripple justify-center max-md:w-full"{% if IS_CAT %} style="display: none;"{% endif %}>{{ lang('PREVIEW') }}</button>
			<button type="submit" name="submit" id="submit" value="{{ lang('SUBMIT') }}" class="btn-primary ripple justify-center max-md:w-full">{{ lang('SUBMIT') }}</button>
			<button type="submit" name="cancel" id="cancel" value="{{ lang('CANCEL') }}" class="btn-primary-outline ripple justify-center max-md:w-full">{{ lang('CANCEL') }}</button>
			<input type="hidden" name="action_cancel" id="action_cancel" value="{{ U_ACTION_CANCEL }}" />
			{{ S_FORM_TOKEN }}
		</div>
  </form>
{% else %}
	<p class="mt-1 text-sm text-secondary">{{ lang('CANNEDMESSAGES_EXPLAIN_MANAGE') }}</p>

	{% if loops.parents %}
	<ul class="linklist parent-list my-2 text-sm flex gap-2">
		{% for parent in loops.parents %}
		<li><a href="{{ parent.U_PARENT}}">{{ parent.PARENT_NAME }}</a></li>
		{% if not parent.S_LAST_ROW %}
		<li>-></li>
		{% endif %}
		{% endfor %}
	</ul>
	{% endif %}

  <div class="mt-4 topiclist">
		<div class="overflow-auto">
			<div class="min-w-full inline-block align-middle">
				<div class="border border-gray-200 rounded-lg overflow-hidden dark:border-slate-800">
					<table class="min-w-full">
						<thead class="bg-slate-50 border-b dark:bg-slate-800">
							<tr>
								<th scope="col" class="p-3 text-start text-xs font-medium text-secondary uppercase">{{ lang('CANNEDMESSAGE_NAME') }}</th>
								<th scope="col" class="p-3 text-center text-xs font-medium text-secondary uppercase message-list-actions" style="width: 8rem;">{{ lang('ACTIONS') }}</th>
							</tr>
						</thead>
						<tbody class="divide-y topiclist cplist">
              {% for cannedmessage in loops.cannedmessages %}
              <tr class="row divide-y <!-- IF loop.index is odd -->max-lg:bg-gray-50 dark:max-lg:bg-slate-800 bg1<!-- ELSE --> bg2<!-- ENDIF -->">
								<td class="p-3">
									<dfn>{{ lang('CANNEDMESSAGE_NAME') }}</dfn>
									<div class="list-inner text-sm">
                    {% if cannedmessage.U_CANNEDMESSAGE %}<a class="font-semibold" href="{{ cannedmessage.U_CANNEDMESSAGE }}">{{ cannedmessage.CANNEDMESSAGE_NAME }}</a>{% else %}{{ cannedmessage.CANNEDMESSAGE_NAME }}{% endif %}
									</div>
								</td>
								<td class="p-3 lg:text-center">
									<dfn>{{ lang('ACTIONS') }}</dfn>
									<div class="message-list-actions">
          					<span class="up-disabled" style="display:none;"><i class="icon mcp-icon mcp-icon-disabled fa-arrow-circle-up fa-fw" title="{{ lang('MOVE_UP') }}"></i></span>
          					<span class="up"><a href="{{ cannedmessage.U_MOVE_UP }}" data-ajax="row_up"><i class="icon mcp-icon mcp-icon-move fa-arrow-circle-up fa-fw" title="{{ lang('MOVE_UP') }}"></i></a></span>
          					<span class="down-disabled" style="display:none;"><i class="icon mcp-icon mcp-icon-disabled fa-arrow-circle-down fa-fw" title="{{ lang('MOVE_DOWN') }}"></i></span>
          					<span class="down"><a href="{{ cannedmessage.U_MOVE_DOWN }}" data-ajax="row_down"><i class="icon mcp-icon mcp-icon-move fa-arrow-circle-down fa-fw" title="{{ lang('MOVE_DOWN') }}"></i></a></span>
          					<a href="{{ cannedmessage.U_EDIT }}"><i class="icon mcp-icon mcp-icon-settings fa-cog fa-fw" title="{{ lang('EDIT') }}"></i></a>
          					<a href="{{ cannedmessage.U_DELETE }}"><i class="icon mcp-icon mcp-icon-delete fa-times-circle fa-fw" title="{{ lang('DELETE') }}"></i></a>
          				</div>
								</td>
							</tr>
		          {% else %}
              <tr>
								<td colspan="2" class="p-3 text-sm"><i>{{ lang('NO_CANNEDMESSAGES') }}</i></td>
							</tr>
		          {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

	<form id="cannedmessages" method="post" action="{{ U_ACTION_ADD }}">
    <div class="quick flex max-md:flex-col gap-2 items-center justify-end mt-4">
			<input type="hidden" name="action" value="add" />
      <input type="text" class="inputbox w-auto max-md:w-full" id="cannedmessage_name" name="cannedmessage_name" value="" maxlength="255" />
			<button type="submit" id="addmessage" name="addmessage" class="btn-primary ripple max-md:w-full justify-center" value="{{ lang('CREATE_CANNEDMESSAGE') }}">{{ lang('CREATE_CANNEDMESSAGE') }}</button>
      {{ S_FORM_TOKEN }}
  	</div>
	</form>
{% endif %}

{% include 'mcp_footer.html' %}
{# include our JS after the footer ensure it is loaded after core ajax.js, which we overrule #}
{% INCLUDEJS '@phpbb_cannedmessages/js/cannedmessages_mcp.js' %}