{{define "page:content"}}
<div id="modal" class="w3-modal">
    <div class="w3-modal-content w3-round-large w3-padding w3-animate-top">
        <header class="w3-container" style="margin-bottom: 20px;">
            <span _="on click remove #modal"
            class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
            <h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>
          </header>
          <form>
            <h5>{{ .item.Title }}</h5>
            <div class="w3-row">
              <div class="w3-col l6">
                <p style="margin-right: 6px">
                  <label for="share-start-datetime">Start date time</label>
                  <input
                    name="start-datetime"
                    class=" w3-border"
                    id="share-start-datetime"
                    type="datetime-local"
                    value=""
                  />
                </p> 
              </div>
              <div class="w3-col l6">
                <p>
                  <label for="share-end-datetime">End date time</label>
                  <input
                    name="end-datetime"
                    class=" w3-border"
                    id="share-end-datetime"
                    type="datetime-local"
                    value=""
                  />
                </p> 
              </div>
            </div>
            <div class="w3-row">
              <div class="w3-col l12">
                <p style="margin-right: 6px">
                  <label for="share-token">Share Url</label>
                  <div class="input-container">
                    <span class="prefix">{{ .baseUrl }}/</span>
                  <input
                    name="token"
                    class="w3-border"
                    id="share-token"
                    type="url"
                    readonly="readonly"
                    value="{{ .shareToken }}"
                  />
                  </div>
                </p> 
              </div>
            </div>
            <div class="w3-row">
              <div class="w3-col l12">
                <p style="margin-right: 6px">
                  <label for="share-password">Password</label>
                  <input
                    name="password"
                    class=" w3-border"
                    id="share-password"
                    type="password"
                    value=""
                  />
                </p> 
              </div>
            </div>
            <fieldset>
              <legend>Permissions</legend>
              <div class="w3-row">
                <div class="w3-col l6">
                    <p>
                      <label class="switch">
                        <input class="" name="read" type="checkbox" value="1" checked="checked">
                        <span class="slider round"></span>
                      </label><span class="label-checkbox">Read</span>
                    </p>
                </div>
                <div class="w3-col l6">
                  <p>
                    <label class="switch">
                      <input class="" name="edit" type="checkbox" value="1">
                      <span class="slider round"></span>
                    </label><span class="label-checkbox">Edit</span>
                  </p>
              </div>
            </div>  
            </fieldset>
            <footer class="w3-container">
              <p style="text-align: center;">
                <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large"><i class='bi bi-share-fill'></i> Share</button>
                <button type="button" _="on click remove #modal" class="w3-btn w3-light-gray w3-round-large">Close</button>
              </p>
            </footer>
          </form>
    </div>
  </div>
  {{ end }}