<template>
  <v-container
    v-if="showAnnouncement"
    class="text-left text-md-center mb-6 mb-sm-8 px-0 px-sm-4"
  >
    <h2>Calling all Party Bus customers and potential Party Bus passengers</h2>
    <div class="mx-8 mt-2 mt-md-0">
      <div class="text-h6">
        Mark your calendars for <b>June 22nd at 1pm MST</b>. Party Bus will be
        hosting an "Ask an Engineer" Session.
      </div>
      <v-dialog
        transition="dialog-top-transition"
        max-width="600"
        :fullscreen="!$vuetify.breakpoint.smAndUp"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="primary mt-8" v-bind="attrs" v-on="on">
            Click here to join the session!
          </v-btn>
        </template>
        <template v-slot:default="dialog">
          <v-card>
            <v-toolbar color="accent" dark>
              Party Bus Ask an Engineer - June 22, 2022
            </v-toolbar>
            <v-card-text>
              <div align="left" class="d-flex flex-column my-6">
                <div>
                  Time:
                  <strong>
                    Jun 22, 2022 01:00 PM Mountain Time (US and Canada)
                  </strong>
                </div>
                <span>Join ZoomGov Meeting</span>
                <div>
                  <a
                    class="font-weight-bold"
                    href="https://www.zoomgov.com/j/1614219290"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    https://www.zoomgov.com/j/1614219290
                  </a>
                </div>

                <div>Meeting ID: 161 421 9290</div>
                <div>One tap mobile</div>
                <div>+16692545252,,1614219290# US (San Jose)</div>
                <div>+16468287666,,1614219290# US (New York)</div>
                <div>Dial by your location</div>
                <div class="ml-4">
                  <a href="tel:+1 669 254 5252">+1 669 254 5252</a> US (San
                  Jose)
                </div>
                <div class="ml-4">
                  <a href="tel:+1 646 828 7666">+1 646 828 7666</a> US (New
                  York)
                </div>
                <div>Meeting ID: 161 421 9290</div>
                <div>
                  Find your local number:
                  <a
                    href="https://www.zoomgov.com/u/abAMTSwzrg"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    https://www.zoomgov.com/u/abAMTSwzrg
                  </a>
                </div>
                <div>Join by SIP</div>
                <div>
                  <a
                    href="mailto:1614219290@sip.zoomgov.com"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    1614219290@sip.zoomgov.com
                  </a>
                </div>
                <div>Join by H.323</div>
                <div>161.199.138.10 (US West)</div>
                <div>161.199.136.10 (US East)</div>
                <div>Meeting ID: 161 421 9290</div>
              </div>
            </v-card-text>
            <v-card-actions class="justify-end">
              <v-btn text @click="dialog.value = false">Close</v-btn>
            </v-card-actions>
          </v-card>
        </template>
      </v-dialog>
    </div>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    // date should be UTC
    eventDate: new Date("2022-06-22T20:00:00.000Z"),
  }),
  computed: {
    showAnnouncement() {
      return Date.now() < this.eventDate;
    },
  },
};
</script>