<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="playlist-share-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="header">
          <h2 class="modal-title">Share this playlist</h2>
          <p><em>Families will receive playlists in their preferred language.</em></p>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>Share link</h3>
        <div class="input-group">
          <input type="text" class="form-control" value="https://app.readyrosie.com/p/1yx02kdh-a1-zjk" aria-label="Copy url" aria-describedby="copy-url">
          <div class="input-group-append">
            <span class="input-group-text" id="copy-url">
              <a data-copy-url="https://app.readyrosie.com/en/playlists/71117" href="/en/playlists/71117">
                <i class="fa fa-link fa-flip-horizontal"></i>&nbsp;Copy URL
              </a>
            </span>
          </div>
        </div>
        <p><small class="form-text text-muted">Anyone with the link can view.</small></p>

        <h3>Send to Families</h3>
        <div class="control-group">
					<label class="hidden" for="select-recipients">Select Recipients</label>
					<select id="select-recipients" class="demo-default" multiple placeholder="Select gear...">
						<option value="">Select recipients</option>
						<optgroup label="Classrooms">
							<option value="classroom-1">Classroom One</option>
							<option value="classroom-2">Classroom Two</option>
							<option value="classroom-3">Classroom Three</option>
							<option value="classroom-4">Classroom Four</option>
						</optgroup>
						<optgroup label="Individual Families">
							<option value="cg-1">John Smith</option>
							<option value="cg-2">Doris Fowler</option>
							<option value="cg-3">Nancy Poles</option>
						</optgroup>
					</select>
          <script>
            $('#select-recipients').selectize({
              sortField: 'text'
            });
          </script>
        </div>
        <div class="control-group">
          <h4>Optional: add a custom message</h4>
          <ul class="nav nav-tabs" id="language-tabs" role="tablist">
            <li>
              <a class="nav-link active" id="en-tab" data-toggle="tab" href="#description-en" role="tab" aria-controls="description-en" aria-selected="true">English</a>
            </li>
            <li>
              <a class="nav-link" id="es-tab" data-toggle="tab" href="#description-es" role="tab" aria-controls="description-es" aria-selected="false">Espanol</a>
            </li>
          </ul>
          <div class="tab-content" id="message-tabs">
            <div class="tab-pane fade show active" id="description-en" role="tabpanel" aria-labelledby="description-en">
              <textarea name="playlist-message-en"></textarea>
            </div>
            <div class="tab-pane fade" id="description-es" role="tabpanel" aria-labelledby="description-es">
              <textarea name="playlist-message-es"></textarea>
              <p><small><a href="#">Translate with Google</a></small></p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Send</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>