cartodb/app/views/admin/organizations/notifications.html.erb

<% content_for :settings_body do %>
  <div class="FormAccount-container js-OrganizationNotification">
    <%= form_for @notification, url: CartoDB.url(self, 'new_organization_notification_admin', user: current_user) do |f| %>
      <%= csrf_meta_tags %>

      <div class="FormAccount-row FormAccount-row--smallMarginBottom">
        <div class="FormAccount-rowLabel">
          <label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor">Notification Description</label>
        </div>
        <div class="FormAccount-rowData">
          <%= f.text_area :body, :class => "CDB-Textarea CDB-Text FormAccount-textarea FormAccount-input FormAccount-input--totalwidth OrganizationNotifications-textarea js-textarea" %>
          <div class="Md-container" data-title="*Italic*, **Bold** and [Link](http://url.com) supported">
            <span class="Md-icon u-rSpace--m">
              <svg width="16px" height="8px" viewBox="0 0 16 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="Md-buttonInner">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g fill-rule="nonzero" fill="#FFFFFF">
                    <polygon points="0 7.01999998 0 0 2.06470588 0 4.12941175 2.58088235 6.19411763 0 8.25882351 0 8.25882351 7.01999998 6.19411763 7.01999998 6.19411763 2.99382352 4.12941175 5.57470587 2.06470588 2.99382352 2.06470588 7.01999998"></polygon>
                    <polygon points="12.9044117 7.01999998 9.80735291 3.61323528 11.8720588 3.61323528 11.8720588 0 13.9367647 0 13.9367647 3.61323528 16.0014705 3.61323528"></polygon>
                  </g>
                </g>
              </svg>
            </span>

            <p class="Md-text CDB-Text CDB-Size-small u-altTextColor">Supported markup</p>
          </div>
        </div>
        <div class="FormAccount-rowInfo">
          <p class="FormAccount-rowInfoText"></p>
        </div>
      </div>

      <div class="OrganizationNotification-submissionRow js-update">
        <div class="FormAccount-rowData">
          <div class="CDB-Text CDB-Size-medium u-rSpace--xl">
            <label class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor">Send to:</label>
            <% Carto::Notification::RECIPIENTS.each do |recipient| %>
              <input class="CDB-Radio u-lSpace--xl" type="radio" name="carto_notification[recipients]" value="<%= recipient %>" <%= recipient == @notification.recipients ? 'checked' : '' %> required="true">
              <span class="u-iBlock CDB-Radio-face u-lSpace--xl"></span>
              <label class="u-iBlock u-lSpace CDB-Text CDB-Size-medium u-secondaryTextColor is-semibold"><%= recipient.capitalize %></label>
            <% end %>
          </div>
        </div>

        <div class="FormAccount-rowData js-send">
          <p class="Md-counter CDB-Text CDB-Size-medium u-secondaryTextColor u-rSpace--xl">140</p>

          <button type="submit" class="OrganizationNotifications-button CDB-Button CDB-Button--primary is-disabled js-save">
            <div class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase u-flex">Send</div>
          </button>
        </div>
      </div>
    <% end %>

    <% if @notifications.size > 0 %>
      <div class="OrganizationNotifications">
        <div class="FormAccount-title">
          <p class="FormAccount-titleText">
            Past Notifications
            <span class="FormAccount-subtitleText">
              (stores up to 12 most recent notifications)
            </span>
          </p>
        </div>

        <span class="FormAccount-separator"></span>

        <ul class="NotificationsList">
          <% @notifications.each do |notification| %>
            <li class="NotificationsList-item js-NotificationsList-item">
              <div class="NotificationsList-itemCategory NotificationsList-itemCategory--<%= notification.icon %>">
              </div>

              <div class="NotificationsList-itemInfo">
                <div class="NotificationsList-itemPrimaryInfo">
                  <div class="NotificationsList-itemTitle CDB-Text CDB-Size-large u-mainTextColor js-html_body" data-body="<%= notification.body %>">
                    <%= raw notification.html_body %>
                  </div>

                  <div class="NotificationsList-itemDescription">
                    <p class="CDB-Text CDB-Size-medium u-altTextColor"><abbr title="<%= notification.created_at %>" class="u-rSpace--xl"><%= notification.created_at.strftime("%d/%m/%Y") %></abbr> User type: <span class="js-recipients" data-recipients="<%= notification.recipients %>"><%= notification.recipients.capitalize %></span></p>
                  </div>
                </div>

                <div class="NotificationsList-itemSecondaryInfo">
                  <div class="NotificationsList-itemMeta CDB-Text CDB-Size-small">
                    <button class="FormAccount-link NotificationsList-itemLink js-resend">Resend</button>
                  </div>

                  <div class="NotificationsList-itemMeta CDB-Text CDB-Size-small">
                    <button class="FormAccount-link NotificationsList-itemLink NotificationsList-itemLink--remove js-remove" data-id="<%= notification.id %>">Remove for all users</button>
                  </div>
                </div>
              </div>
            </li>
          <% end %>
        </ul>
      </div>
    <% end %>
  </div>
<% end %>

<%= render template: 'admin/organizations/_organization_settings', locals: { title: 'notifications' } %>