{% if S_NOTES_POPUP %}
	{% INCLUDE 'simple_header.html' %}
{% else %}
  {% embed "overall_header.html" %}
  	{% block header_content %}
  		<h1 class="text-slate-50 md:text-2xl text-xl">
        {{ lang('NOTES') }} &bull;&nbsp; {{ NOTES_TOTAL_USED }} / {{ NOTES_TOTAL_ALLOWED }}
      </h1>
  	{% endblock %}
  {% endembed %}
{% endif %}

<form action="{{ S_NOTES_FORM_ACTION }}" method="post" id="postform">

  <div class="card mt-4" id="postingbox">
  	<div class="card-title"><h2>{{ NOTE_MODE }}</h2></div>
  	<div class="p-4">

      <div class="post divide-y space-y-4 dark:divide-slate-800" id="postingbox">
        <div class="first:pt-0 pt-4">
      		<label for="subject" class="block text-sm font-medium mb-2 notes-field-name">{{ lang('SUBJECT') ~ lang('COLON') }}</label>
      		<input type="text" name="subject" id="subject" size="75" maxlength="255" value="{{ NOTES_SUBJECT }}" class="notes-field-data inputbox">
      	</div>

        <div class="first:pt-0 pt-4">
          <div class="flex items-center gap-4">
        		<label for="mem_yesno" class="block text-sm font-medium notes-field-name">{{ lang('NOTES_MEM') ~ lang('COLON') }}</label>
        		<input id="mem_yesno" type="checkbox" class="checkbox-primary notes-field-data" name="mem_yesno" value="1"{% if NOTES_MEM_CHECKED %} checked="checked"{% endif %} /></label>
      	  </div>
      	</div>

        <div class="first:pt-0 pt-4">
      		<label for="mem_day" class="block text-sm font-medium mb-2 notes-field-name">{{ lang('NOTES_MEM_TIME') ~ lang('COLON') }}</label>
    			<div class="notes-field-data flex items-center gap-2">
      			<select id="mem_day" name="mem_day" class="inputbox">
    					{% for notes_days in loops.notes_days %}
    					<option value="{{ notes_days.DAY }}"{% if notes_days.DAY eq S_NOTE_MEM_DAY %} selected="selected"{% endif %}>{{ notes_days.DAY }}</option>
    					{% endfor %}
    				</select>
    				<select name="mem_month" class="inputbox">
    					{% for notes_months in loops.notes_months %}
    					<option value="{{ notes_months.MONTH }}"{% if notes_months.MONTH eq S_NOTE_MEM_MONTH %} selected="selected"{% endif %}>{{ notes_months.MONTH }}</option>
    					{% endfor %}
    				</select>
    				<select name="mem_year" class="inputbox">
    					{% for notes_years in loops.notes_years %}
    					<option value="{{ notes_years.YEAR }}"{% if notes_years.YEAR eq S_NOTE_MEM_YEAR %} selected="selected"{% endif %}>{{ notes_years.YEAR }}</option>
    					{% endfor %}
    				</select>
    				&bull;
    				<select name="mem_hour" class="inputbox">
    					{% for notes_hours in loops.notes_hours %}
    					<option value="{{ notes_hours.HOUR }}"{% if notes_hours.HOUR eq S_NOTE_MEM_HOUR %} selected="selected"{% endif %}>{{ notes_hours.HOUR }}</option>
    					{% endfor %}
    				</select>
    				<select name="mem_minute" class="inputbox">
    					{% for notes_minutes in loops.notes_minutes %}
    					<option value="{{ notes_minutes.MINUTE }}"{% if notes_minutes.MINUTE eq S_NOTE_MEM_MIN %} selected="selected"{% endif %}>{{ notes_minutes.MIN }}</option>
    					{% endfor %}
    				</select>
          </div>
      	</div>

    		<div class="first:pt-0 pt-4">
    			{% INCLUDE 'posting_buttons.html' %}

    			<div class="mt-2 md:grid <!-- IF $SIG_EDIT == 1 --> md:grid-cols-4 <!-- ELSE --> md:grid-cols-5 <!-- ENDIF --> md:gap-5">
    				<div class="text-sm <!-- IF $SIG_EDIT == 1 --> md:col-span-3 <!-- ELSE --> md:col-span-4 <!-- ENDIF -->">
							<div id="message-box" class="message-box">
								<textarea name="message" id="message" rows="13" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" class="inputbox">{{ NOTES_MESSAGE }}</textarea>
							</div>
    				</div>
    				<div class="text-sm max-md:mt-4">
    					<div id="smiley-box" class="smiley-box">
    						{% if loops.smiley|length %}
    							<div class="font-semibold pb-2 mb-2 border-b dark:border-slate-800">{L_SMILIES}</div>
    							<div class="flex items-center flex-wrap">
    								{% for smiley in loops.smiley %}
    									<a href="#" class="size-8 flex items-center justify-center rounded-md hover:bg-gray-50 dark:hover:bg-slate-800" onclick="insert_text('{{ smiley.A_SMILEY_CODE }}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{{ smiley.SMILEY_WIDTH }}" height="{{ smiley.SMILEY_HEIGHT }}" alt="{{ smiley.SMILEY_CODE }}" title="{{ smiley.SMILEY_DESC }}"></a>
    								{% endfor %}
    							</div>
    						{% endif %}
    					</div>
    					
    					<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED -->
    						<a href="{U_MORE_SMILIES}" class="pt-2 text-center font-medium block" onclick="popup(this.href, 750, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
    					<!-- ENDIF -->
    				</div>
    			</div>

    		</div>

      </div>
    </div>
  </div>

  <div class="card my-4 text-center p-4">
		<button type="submit" name="save" id="submit" value="{{ lang('SUBMIT') }}" class="btn-primary ripple mx-auto">{{ lang('SUBMIT') }}</button>
		{{ S_FORM_TOKEN }}
		{{ S_NOTES_HIDDEN_FIELDS }}
	</div>
</form>

{% if S_NOTES_POPUP %}

<div class="leading-[0] mt-4">
	<a class="block text-red-700 dark:text-red-400 p-2" href="#" onclick="window.close(); return false;">{L_CLOSE_WINDOW}</a>
</div>

	{% INCLUDE 'simple_footer.html' %}
{% else %}
	{% INCLUDE 'overall_footer.html' %}
{% endif %}