include ./helpers

- var avatar = "https://storage.googleapis.com/media.table.co/c33369b2-db56-40d2-a38b-1ad5ee89cc83_RC_140x140.jpeg?GoogleAccessId=560341208563-u1ti014a2f6lfp2id4v2h976d2ci3ce1@developer.gserviceaccount.com&Expires=17203901351&Signature=Ut6yda4xLF5kXmnmtfCNKrrqGM1mw5tDD8aCt0NfvwIkiwuNElYBu2OArdxe5nfw%2Fp0dRcWkbgmjglKIU5yB78c%2BvwgfS171GAxPO%2FvnZ%2FRdGhvui2KiCPKovugsQ6TV7P5um%2BG7TK0CJlw5pf35yQjXpX3lgxBHpkyk9RjqhPuMnMu0oIHbYsI1QjKCQH83aZrOZIAEGYXivOsbFcuASN1aegpsP%2B7D6t3liLhDb7VD36gEwqGZSO18p60d5IdAx3kWVSo246DOp5kphPoO0NAiww%2BvcE7SjS4A8RfUZDVOF9B3E7vFmpSgfgVhFoo5Tjn%2BRJX%2BKDo7Nzcy%2FeG%2BwA%3D%3D"

h1.example__header Messages

//
  .row
    .column--quarter
      span.header--small Messages
      p.content--small.
        Standard way of displaying messages in a table. There are three modifiers for the message component. These modifiers hide info and format the box accordingly. Note that ommitting fields that would be hidden otherwise don't affect the display.
      ul
        li has-next
        li has-previous
        li mine
    .column--three-quarter
      label.label Code Example
      +codeExample("html").
        <div class="message message--mine">
          <img class="message__avatar" src="..."/>
          <div class="message__content">
            <div class="message__name">Connor McCutcheon</div>
            <div class="message__message">
              This is my message's content. It is enough content to wrap around to the next line so we know where the boundaries between elements are.
            </div>
          </div>
          <div class="message__extra">
            <div class="message__time">00:00</div>
            <div class="message__options">
              <span class="icon-pencil"/>
              <span class="icon-trash"/>
            </div>
          </div>
        </div>
        <br />
        <div class="message message--has-next">
          ...same
        </div>
        <div class="message message--has-previous message--has-next">
          ...same
        </div>
        <div class="message message--has-previous">
          ...same
        </div>

      label.label Result
      .message.message--mine
        img.message__avatar(src=avatar)
        .message__content
          .message__name Connor McCutcheon
          .message__message This is my message's content. It is enough content to wrap around to the next line so we know where the boundaries between elements are.
        .message__extra
          .message__time 00:00
          .message__options
            span.icon-pencil
            span.icon-trash
      br
      .message.message--has-next
        img.message__avatar(src=avatar)
        .message__content
          .message__name Connor McCutcheon
          .message__message This is my message's content. It is enough content to wrap around to the next line so we know where the boundaries between elements are.
        .message__extra
          .message__time 00:00
          .message__options
            span.icon-pencil
            span.icon-trash

      .message.message--has-previous.message--has-next
        img.message__avatar(src=avatar)
        .message__content
          .message__name Connor McCutcheon
          .message__message
            img(src=avatar)
        .message__extra
          .message__time 00:00
          .message__options
            span.icon-pencil
            span.icon-trash

      .message.message--has-previous
        img.message__avatar(src=avatar)
        .message__content
          .message__name Connor McCutcheon
          .message__message Less content looks good, too.
        .message__extra
          .message__time 00:00
          .message__options
            span.icon-pencil
            span.icon-trash