extends ../layouts/main
block content

  - var formActionUrl = announcement ? `/admin/announcement/${announcement._id}` : '/admin/announcement';

  form(method="POST", action= formActionUrl).uk-form
    .uk-card.uk-card-default.uk-card-small
      .uk-card-header
        h1 Announcement Editor

      .uk-card-body
        div(uk-grid)
          .uk-width-1-2
            .uk-margin
              label(for="icon-class").uk-form-label Icon Class
              input(
                id="icon-class",
                name="titleIconClass",
                type="text",
                placeholder="Enter FontAwesome icon class",
                value= announcement ? announcement.title.icon.class : 'fa-bullhorn',
              ).uk-input
              .uk-text-small
                a(href="https://fontawesome.com/v5/search", target="_blank") Search icons

          .uk-width-1-2
            .uk-margin
              label(for="icon-color").uk-form-label Icon Color
              input(
                id="icon-color",
                name="titleIconColor",
                type="color",
                value= announcement ? announcement.title.icon.color : '#ff0013',
              ).uk-input

        .uk-margin
          label(for="title").uk-form-label Title
          input(
            id="title",
            name="titleContent",
            type="text",
            placeholder="Enter announcement title", value= announcement ? announcement.title.content : undefined,
          ).uk-input

        .uk-margin
          label(for="content").uk-form-label Announcement Body
          textarea(id="content", name="content", rows="4", placeholder="Enter announcement").uk-textarea= announcement ? announcement.content : undefined

      .uk-card-footer
        button(type="submit").uk-button.dtp-button-primary= announcement ? 'Update Announcement' : 'Create Announcement'