{{- $c := site.Data.content -}}
<section class="booking" id="book" aria-labelledby="book-h">
    <span class="bg1" aria-hidden="true"></span>
    <span class="bg2" aria-hidden="true"></span>
    <svg class="sprig-l" viewBox="0 0 260 320" aria-hidden="true">
      <g class="sway"><use href="#leaf" width="40" height="64" fill="#D4E84F" transform="translate(120 320) rotate(-20) scale(3.4) translate(-20 -64)" /></g>
      <g class="sway c"><use href="#leaf" width="40" height="64" fill="#2DB466" transform="translate(130 320) rotate(30) scale(2.4) translate(-20 -64)" /></g>
    </svg>
    <div class="wrap">
      <div class="book-head rv">
        <span class="eyebrow">{{ $c.book.span_1 }}</span>
        <h2 class="h2" id="book-h">{{ $c.book.h2_2 }}</h2>
        <p>{{ $c.book.p_3 }}</p>
      </div>
      <div class="forms">
        <div class="fcard rv">
          <h3>{{ $c.book.h3_4 }}</h3>
          <p>{{ $c.book.p_5 }}</p>
          
          <form class="form" id="f-book" action="https://formgong.com/submit" method="POST">
            <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
            <input type="hidden" name="subject" value="New booking request from the website">
            <div class="hp" aria-hidden="true"><label>{{ $c.book.text_6 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
            <fieldset class="chips full">
              <legend>{{ $c.book.legend_7 }}</legend>
              <div class="opts">
                <label><input type="radio" name="service" value="Flu vaccination" checked><span>{{ $c.book.span_8 }}</span></label>
                <label><input type="radio" name="service" value="Travel vaccines"><span>{{ $c.book.span_9 }}</span></label>
                <label><input type="radio" name="service" value="Chickenpox vaccine"><span>{{ $c.book.span_10 }}</span></label>
                <label><input type="radio" name="service" value="Blood pressure check"><span>{{ $c.book.span_11 }}</span></label>
                <label><input type="radio" name="service" value="Weight and waist check"><span>{{ $c.book.span_12 }}</span></label>
              </div>
            </fieldset>
            <fieldset class="chips days full">
              <legend>{{ $c.book.legend_13_html | safeHTML }}</legend>
              <div class="opts">
                <label><input type="radio" name="day" value="Any day" checked><span>{{ $c.book.span_14 }}</span></label>
                <label><input type="radio" name="day" value="Monday"><span>{{ $c.book.span_15 }}</span></label>
                <label><input type="radio" name="day" value="Tuesday"><span>{{ $c.book.span_16 }}</span></label>
                <label><input type="radio" name="day" value="Wednesday"><span>{{ $c.book.span_17 }}</span></label>
                <label><input type="radio" name="day" value="Thursday"><span>{{ $c.book.span_18 }}</span></label>
                <label><input type="radio" name="day" value="Friday"><span>{{ $c.book.span_19 }}</span></label>
                <label><input type="radio" name="day" value="Saturday"><span>{{ $c.book.span_20 }}</span></label>
              </div>
            </fieldset>
            <div class="field full">
              <label for="b-time">{{ $c.book.label_21_html | safeHTML }}</label>
              <select id="b-time" name="time">
                <option>{{ $c.book.option_22 }}</option>
                <option>{{ $c.book.option_23 }}</option>
                <option>{{ $c.book.option_24 }}</option>
                <option>{{ $c.book.option_25 }}</option>
              </select>
            </div>
            <div class="field">
              <label for="b-name">{{ $c.book.label_26 }}</label>
              <input id="b-name" name="name" autocomplete="name" required maxlength="100">
            </div>
            <div class="field">
              <label for="b-phone">{{ $c.book.label_27 }}</label>
              <input id="b-phone" name="phone" type="tel" autocomplete="tel" required maxlength="40">
            </div>
            <div class="field full">
              <label for="b-email">{{ $c.book.label_28_html | safeHTML }}</label>
              <input id="b-email" name="email" type="email" autocomplete="email" maxlength="160">
            </div>
            <div class="field full">
              <label for="b-note">{{ $c.book.label_29_html | safeHTML }}</label>
              <textarea id="b-note" name="note" maxlength="300" placeholder="e.g. I'd prefer a quiet time, or I'm coming with my son" aria-describedby="b-hint"></textarea>
              <p class="hint" id="b-hint"><svg aria-hidden="true"><use href="#info" /></svg>{{ $c.book.text_30 }}</p>
            </div>
            <div class="send full">
              <button class="btn btn-beet" type="submit"><span data-send-label>{{ $c.book.span_31 }}</span></button>
              <p class="credit">{{ $c.book.p_32_html | safeHTML }}</p>
            </div>
            <p class="status-msg full" data-status role="status" aria-live="polite"></p>
            <div class="thanks" tabindex="-1">
              <svg viewBox="0 0 40 64" aria-hidden="true" fill="#1F9A55"><use href="#leaf" /></svg>
              <strong>{{ $c.book.strong_33_html | safeHTML }}</strong>
              <p>{{ $c.book.p_34 }}</p>
              <button type="button" data-again>{{ $c.book.button_35 }}</button>
            </div>
          </form>
        </div>

        <div class="fcard dark rv" id="ask" style="--d:.1s">
          <h3>{{ $c.book.h3_36 }}</h3>
          <p>{{ $c.book.p_37 }}</p>
          
          <form class="form" id="f-ask" action="https://formgong.com/submit" method="POST">
            <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
            <input type="hidden" name="subject" value="Callback request: ask a pharmacist">
            <div class="hp" aria-hidden="true"><label>{{ $c.book.text_38 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
            <div class="field full">
              <label for="a-name">{{ $c.book.label_39 }}</label>
              <input id="a-name" name="name" autocomplete="name" required maxlength="100">
            </div>
            <div class="field full">
              <label for="a-phone">{{ $c.book.label_40 }}</label>
              <input id="a-phone" name="phone" type="tel" autocomplete="tel" required maxlength="40">
            </div>
            <fieldset class="chips full">
              <legend>{{ $c.book.legend_41 }}</legend>
              <div class="opts">
                <label><input type="radio" name="call_time" value="Morning" checked><span>{{ $c.book.span_42 }}</span></label>
                <label><input type="radio" name="call_time" value="Lunchtime"><span>{{ $c.book.span_43 }}</span></label>
                <label><input type="radio" name="call_time" value="Afternoon"><span>{{ $c.book.span_44 }}</span></label>
                <label><input type="radio" name="call_time" value="Early evening"><span>{{ $c.book.span_45 }}</span></label>
              </div>
            </fieldset>
            <div class="field full">
              <label for="a-q">{{ $c.book.label_46_html | safeHTML }}</label>
              <textarea id="a-q" name="question" maxlength="280" placeholder="e.g. Which vitamins are worth taking in winter?" aria-describedby="a-hint"></textarea>
              <p class="hint" id="a-hint"><svg aria-hidden="true"><use href="#info" /></svg>{{ $c.book.text_47 }}</p>
            </div>
            <div class="send full">
              <button class="btn" type="submit"><span data-send-label>{{ $c.book.span_48 }}</span></button>
              <p class="credit">{{ $c.book.p_49_html | safeHTML }}</p>
            </div>
            <p class="status-msg full" data-status role="status" aria-live="polite"></p>
            <div class="thanks" tabindex="-1">
              <svg viewBox="0 0 40 64" aria-hidden="true" fill="#D4E84F"><use href="#leaf" /></svg>
              <strong>{{ $c.book.strong_50_html | safeHTML }}</strong>
              <p>{{ $c.book.p_51 }}</p>
              <button type="button" data-again>{{ $c.book.button_52 }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>