doctype html
html
  head
    title Ordine Confermato

    //- import css/scss stylesheets
    //- these file names will be replace by gulp with proper css file paths
    link(rel="stylesheet", href="../sass/basic.scss")
    link(rel="stylesheet", href="../sass/one/styles.scss")

    //- embdedded css allowed, but not sass
    style.
        .red {
            background-color: #E84C50;
        }

        .full-width {
            width: 100%;
        }

  body(yahoofix, style="background: #ffffff")
    - var baseimg = baseurl + '/statics/'
    span(id='body_style', style='display:block')
      table(cellpadding="10", cellspacing="0", width="600", align="center")
        tr
          td(class="whitespace", height="10")
            p  
        tr
          td(class="emailContainer", valign="top")

            p Ciao #{name},
            p L'ordine dei seguenti prodotti è stato Confermato:

        tr
          td(class="whitespace", height="10")
            p  

            - var totalPrice = orders.totalPrice
            - var note = orders.note
            - var index = 0

            each product in orders.items
              - var descr = product._doc.order.product.name
              - var img = product._doc.order.product.img
              - var price = product._doc.order.price
              - var qty = product._doc.order.quantity
              - index = index + 1

              table(cellpadding="0", cellspacing="0", width="100%", summary="", border="0", align="center")
                tr
                  td(class="column", valign="center" width="40")
                    p.boldhigh #{index}.

                  td(class="column sectionArticleImage", valign="top" width="150")
                    table(cellpadding="0", cellspacing="0", summary="", border="0")
                      tr
                        td
                          img(src=baseimg + img, alt="", width="150" height="150")
                  td(class="column", valign="top")

                    table(cellpadding="0", cellspacing="0", summary="", border="0")
                      tr
                        td(class="sectionContentTitle boldhigh", valign="top")
                          p #{descr}
                      tr
                        td(class="sectionContent", valign="top")
                          p Prezzo: #{price} €
                      tr
                        td(class="sectionContent", valign="top")
                          p Quantità: #{qty}

            p Note Aggiuntive: #{note}

            p.sectionContentTitle.boldhigh.sectionTotal Totale Ordine: #{totalPrice} €
        tr
          td(class="whitespace", height="10")

        p Puoi pertanto venire a ritirarli direttamente in sede.
        p Grazie Mille

        table.footer(cellpadding="0", cellspacing="0", width="100%", summary="", border="0", align="center")
          tr
            td(class="whitespace", height="10")
              p  
          tr
            td.firma
              p!= dataemail.firma

          tr
            td.disclaimer
              p!= dataemail.disclaimer_out

          tr
            td.bottom
              p!= dataemail.disc_bottom_out

          tr
            td(class="whitespace", height="10")
              p  

style(type="text/css").
    html, body {
        padding: 0;
        margin: 0;
    }

    p {
        font-size: 1rem;
    }


    .divbtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-lg {
        padding: 5px;
        margin: 5px;
        font-size: 26px;
        cursor: pointer;
        color: white;
        background: #027be3 !important;
        border-radius: 28px;

    }