{{>emailmodal}}
<div id="event-lineup-{{event.id}}" data-event-lineup-id="{{event_lineup.id}}" data-event-id="{{event.id}}">
<form onsubmit="onSubmit(this,event)" action="#">
  <input type="hidden" name="event_lineup_id" value="{{event_lineup.id}}">
  {{!-- <input type="hidden" name="_csrf" value="{{csrfToken}}"> --}}
  <input type="hidden" name="csrfToken" value="{{csrfToken}}">
  <div class="Panel Panel--full">
    <div class="Panel-header u-padEndsSm">
      <h3 style="flex: 1 1 0%;">{{event.formattedTitle}}</h3>
      <div class="ButtonGroup">
        <button class="Button Button--orange" type="submit" formmethod="post">
          <div>
            <span id="teamsnap-icon">{{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}</span>
            <span id="waiting-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/loader.svg" "Icon--loader"}}}</span>
            <span id="success-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/check.svg"}}}</span>
            <span id="failure-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/dismiss.svg"}}}</span>
            Save
            </div>
        </button>
        <div class="Button Button--orange .u-padSidesXs Popup" onclick="togglePopup(this)">
          {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/caret-down.svg"}}}
          <div class="Popup-container Popup-container--down Popup-container--right" style="width: 200px">
            <div class="Popup-content u-textDecorationNone">
              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="emailModal(this, '{{event_lineup.id}}/email')">
									{{{embeddedSvgFromPath "/bootstrap-icons/envelope.svg"}}}
									<span>Generate Email</span>
              </a>
              <hr class="Divider u-spaceEndsNone">
              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="../sheet">
									{{{embeddedSvgFromPath "/bootstrap-icons/book.svg"}}}
									<span>Lineup Card</span>
              </a>
            </div>
          </div>
          </div>
      </div>
    </div>
    <div class=" Panel-body u-padEndsSm">
        <div class=" u-padSidesSm">
            <div class="date">{{dateFormat event.startDate "ddd, MMM D h:mm A" }}</div>
            <div class="location">{{event.locationName}}</div>
        </div>
        <div class=" availability-bar fullwidth">

        </div>
    </div>
  </div>
  <div id="lineup-starting-{{event.id}}" class="Panel u-maxWidthSm starting Panel--fullWidthMobile Panel--full">
    <div class="Panel-body">
      <div class="Panel-row Panel-title u-padXs">
        <i>{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}</i>
        <span>Starting Lineup</span>
      </div>
      <div class=" Panel-row Grid Grid--fit u-textBold u-textCenter u-padXs">
        {{#each (positions)}}
          <div class="Grid-cell position-status">{{this}}</div>
        {{/each}}
      </div>
      <div class="slot-set">
        {{#each members}}
          {{#if (isInStartingLineup this)}}
            {{> slot member=this}}
          {{/if}}
        {{/each}}
      </div>
    </div>
  </div>    
  <div id="lineup-positiononly-{{event.id}}" class="Panel u-maxWidthSm position-only Panel--full">
    <div class="Panel-row Panel-title u-padXs">
        {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}
        <span>Position Only</span>
      </div>
      <div class="slot-set">
        {{#each members}}
          {{#if (isInPositionOnly this)}}
            {{> slot member=this}}
          {{/if}}
        {{/each}}
      </div>
  </div>
  <div id="lineup-bench-{{event.id}}" class="Panel u-maxWidthSm bench Panel--full">
    <div class="Panel-row Panel-title u-padXs">
        {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-minus.svg"}}}
        <span>Bench</span>
      </div>
    <div class="slot-set">
      {{#each members}}
      {{#if (isInBench this)}}
        {{> slot member=this event=../event}}
      {{/if}}
      {{/each}}
    </div>
  </div>
  <div id="lineup-out-{{event.id}}" class="Panel u-maxWidthSm out Panel--full">
    <div class="Panel-row Panel-title u-padXs">
        <span style="flex: 1 1 0%;">{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-x.svg"}}}Out</span>
        <div class="Toggle">
          <input class="Toggle-input" type="checkbox" id="enable-slots" onclick="toggleChildSlots(this);">
          <label class="Toggle-label" for="availability-tab"></label>
        </div>
      </div>
    <div class="slot-set">
      {{#each members}}
      {{#if (isInOut this)}}
        {{> slot member=this}}
      {{/if}}
      {{/each}}
    </div>
  </div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="/js/eventlineup.js"></script>
<script src="/js/tinymce.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
  colorPositions();
	refreshLineup();
  tinymce.init({
    selector:"#email-editor", 
    content_css:"/css/application.css", 
    plugins: 'image',
    menubar: false,
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image',
    paste_data_images: true,
    statusbar:false})
})
</script>