<div id="{{id}}" contenteditable= "false" class="pm-calendar-availability" style="width: 100%">
    <div style="width: 100%; max-width: 500px; font-family: -apple-system, 'Helvetica Neue', Helvetica, 'Lucida Grande', -sans-serif !important; font-size: 12px !important; box-sizing: border-box; margin: 0px auto; color: #468EE5; line-height: 1; text-align: center;">
        
        {% for each in datesArray %}
        
        <div style="margin-top: 10px">
            
            <strong>
                <div style="font-size: 13px; margin-bottom: 10px;">{{ each.dateString }}</div>
            </strong>
            
            {% for duration in each.durations %}
            
            <div style="font-size: 12px; border: 1px solid #468EE5; border-radius: 2px; margin-bottom: 5px; line-height: 40px; vertical-align: middle;">{{ duration }} ({{timeZone}})</div>
            
            {% endfor %}
        </div>
        {% endfor %}
        
        <div style="margin-top: 10px; margin-bottom: 10px">
            {% if freeUser %}
            <p><a href="https://polymail.io/?utm_source=polymail&utm_medium=referral&utm_campaign=cal-availability"><img src="https://welovepg.polymail.io/v1/img/calendar-invite/logo@3x.png" style="height:20px;"></a></p>
            <a href="https://polymail.io/?utm_source=polymail&utm_medium=referral&utm_campaign=cal-availability" style="text-decoration:none; color: #53a0fd;" >Scheduling made easy with Polymail</a>
            {% endif %}
        </div>
    </div>
</div>
