{% load i18n l10n %}

<style type="text/css">



.legend{
  /*border: 1px solid black;*/
  display: inline-block;
  width:14px;
  height: 14px;
  border-radius: 5px;
}





#waybill{background-color:#ABB3AE;}
#created{background-color:#2BA1D0;}
#viewed{background-color:#3B5781;}
#validated{background-color:#5EB756;}
#rejected{background-color:#DB0000;}
#paid{background-color:#1C5706;}
#overdue{background-color:#DB8000;}

#notassigned{background-color:#DB0000;}
#assigned{background-color:#1C5706;}
#partially{background-color:#DB8000;}


.waybill{background-color:#ABB3AE;}
.created{background-color:#2BA1D0;}
.viewed{background-color:#3B5781;}
.validated{background-color:#5EB756;}
.rejected{background-color:#DB0000;color:#FFD3BD;}
.paid{background-color:#1C5706;}
.overdue{background-color:#DB8000;}

.notassigned{background-color:#DB0000;}
.assigned{background-color:#1C5706;}
.partially{background-color:#DB8000;}

.legend_content{
  display: inline-block;
  float:right;
  border:1px solid white;
  padding: 4px;
  border-radius: 5px;
  /*width: 100px;*/
  margin: 5px 5px 5px 5px;
}
  
.legend_invoice
{
  display: inline-block;
  float:left;
  /*border: 1px solid red;*/
  /*width:75px;*/
  text-align: right;
  margin-right: 7px;
}

.legend_status
{
  display: inline-block;
  float:left;
  /*border: 1px solid red;*/
  /*width:95px;*/
  text-align: right;
  margin-right: 7px;
}

.text_legend{
  float:left;
  display: inline-block;
  color:orange;
  text-decoration: bold;
}


</style>

{% get_current_language as LANGUAGE_CODE %}

{% if format == 'Invoice' %}

  <div id='{{view_name}}_lengend_invoice' class = 'legend_content'>
        <div id = 'text_legend_invoice'  class='text_legend'> Invoice: </div>
        <div class = 'legend_invoice'> Way bill <p id = 'waybill' class= 'legend'> </p> </div>
        <div class = 'legend_invoice'>Created <p id = 'created' class= 'legend'> </p> </div>
        <div class = 'legend_invoice'>Viewed <p id = 'viewed' class= 'legend'> </p> </div>
        <div class = 'legend_invoice'>Validated  <p id = 'validated' class= 'legend'> </p> </div>
        <div class = 'legend_invoice'>Rejected  <p id = 'rejected' class= 'legend'> </p> </div>
        <div class = 'legend_invoice'>Paid     <p id = 'paid' class= 'legend'> </p> </div>
        <div class = 'legend_invoice'>Overdue   <p id = 'overdue' class= 'legend'> </p> </div>
  </div>
{% endif %}


{% if format == 'Payment'%}

  <div id='{{view_name}}_lengend_payment' class = 'legend_content'>
        <div id = 'text_legend_payment' class='text_legend'> Payment: </div>
        <div class = 'legend_status'> Not Assigned      <p id = 'notassigned' class= 'legend'> </p> </div>
        <div class = 'legend_status'>Assigned           <p id = 'assigned' class= 'legend'> </p> </div>
        <div class = 'legend_status'>Partially  <p id = 'partially' class= 'legend'> </p> </div>
  </div>
{%endif%}

<script type="text/javascript" lang="text/javascript">



</script>

