<!--storefront notification templates-->
<div class="storefront-rightbar notification-template template">
   <h1 class="storefront-heading">Notification Templates<span>This is a notification email sent to the customer when their Azure subscriptions are over the set budget. Budget alerts are sent once a day starting at 80% of set budget.</span></h1>
   <div class="row">
      <div class="col-md-12">
         <div class="alert alert-danger emailAlert" style="display: none;">
            <i></i><span class="">This email address is invalid. Please enter valid Email to continue.</span>
         </div>
      </div>
   </div>
   <div class="row col-custom-padding">
      <div class="col-12 col-xl-9">
         <div class="mail-format">
            <div class="usermail-info">From: <span>no-reply@cloudsubscription.com</span></div>
            <div class="usermail-info">Cc: <span>no-reply@cloudsubscription.com</span></div>
            <div class="usermail-info">Bcc: <span>no-reply@cloudsubscription.com</span></div>
            <div class="usermail-info">Subject: <span>no-reply@cloudsubscription.com</span></div>
            <hr class="hair-line">
            <div class="tanant-info">
               <img src="images/microsoft-l.png" class="mb-2">
               <h2>Tenant Information</h2>
               <div class="row col-custom-padding">
                  <div class="col-md-12">
                     <div class="tanant-info-box">
                        <label>Tenant Domain</label>
                        <a href="javascript:void(0);">hiramh.onmicrosoft.com.reseller.synnex.com.synnex.business</a>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="tanant-info-box">
                        <div class="row">
                           <div class="col-md-8">
                              <label>Subscription Name</label>
                              <span class="info-value">Exchange Online (Plan 1)</span>
                              <span class="info-value">Exchange Online Protection</span>
                           </div>
                           <div class="col-md-4">
                              <label>Subscription ID</label>
                              <span class="info-value">53212460-5809-4747</span>
                              <span class="info-value">64216460-8889-5274</span>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="row col-custom-padding">
                        <div class="col-md-6">
                           <div class="tanant-info-box">
                              <label>Requested Budget</label>
                              <span class="info-value">$28,947</span>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <div class="tanant-info-box">
                              <label>Estimated Current Usage</label>
                              <span class="info-value">$12,636</span>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <div class="tanant-info-box">
                              <label>Estimated Usage Percent</label>
                              <span class="info-value">80%</span>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <p class="mail-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus enim vitae risus vulputate, nec ullamcorper quam dapibus. Pellentesque tempor augue at lorem feugiat pulvinar. </p>
            </div>
         </div>
      </div>
      <div class="col-12 col-xl-3">
         <div class="tenant-form">
            <label>Select Email Template <span class="asterisk">*</span></label>
            <div class="search-input-col">
               <div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
                  <button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="icon-arrow-bottom"></i>
                  <span class="selected-value">Customer Budget Alert</span>
                  </button>
                  <div class="dropdown-menu active-menu" style="display: none;">
                     <div>
                        <a class="dropdown-item " href="javascript:void(0);"><span>Customer Budget Alert</span></a>
                        <a class="dropdown-item " href="javascript:void(0);"><span>CSP Credit Review</span></a>
                        <a class="dropdown-item " href="javascript:void(0);"><span>CSP Cron Credit Review</span></a>
                        <a class="dropdown-item " href="javascript:void(0);"><span>Customer Registration Invitation</span></a>
                        <a class="dropdown-item " href="javascript:void(0);"><span>Customer Validation Code</span></a>
                        <a class="dropdown-item " href="javascript:void(0);"><span>Storefront Outbound Code</span></a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="mail-from">
               <label>From</label>
               <div class="search-input-col">
                  <i class="icon-cross" style=""></i>
                  <input type="text" class="form-control form-control-padding email" placeholder="no-reply@cloudsubscription.com" disabled>
               </div>
            </div>
            <label>Cc</label>
            <div class="search-input-col">
               <i class="icon-cross" style=""></i>
               <input type="text" class="form-control form-control-padding email">
            </div>
            <label>Bcc</label>
            <div class="search-input-col">
               <i class="icon-cross" style=""></i>
               <input type="text" class="form-control form-control-padding email">
            </div>
            <label>Subject</label>
            <div class="search-input-col">
               <i class="icon-cross" style=""></i>
               <input type="text" class="form-control form-control-padding">
            </div>
            <label>Description</label>
            <div class="search-input-col">
               <i class="icon-cross" style=""></i>
               <textarea class="form-control"></textarea>
            </div>
         </div>
      </div>
   </div>
   <div class="form-btn-footer">
      <input type="button" class="btn btn-outline  ml-auto resetTemp" value="Reset">
      <input type="button" class="btn btn-primary " value="Save">
   </div>
</div>
<!--storefront notification templates-->