<% due_date_editable = can_update_my_module_due_date?(user, my_module)%>
<% due_status = my_module_due_status(my_module) %>

<div id="dueDateContainer" class="datetime-container"
     data-update-url="<%= my_module_path(my_module, user, format: :json) %>">
  <span class="date-text relative flex items-center" data-editable="<%= due_date_editable %>"
        data-toggle="tooltip" data-placement="top" title="<%= due_status %>" data-due-status="<%= due_status %>">
    <span id="dueDateLabelContainer" class="view-block" >
      <%= render partial: "experiments/table_due_date_label" ,
                 locals: { my_module: my_module, user: user } %>
    </span>
    <% if due_date_editable %>
      <div class="datetime-picker-container vue-date-time-picker h-full" id="calendarDueDateContainer<%= my_module.id %>">
        <input ref="input" type="hidden" data-simple-format="true"  v-model="date" id="calendarDueDate<%= my_module.id %>" data-default="<%= l(my_module.due_date, format: :default) if my_module.due_date %>" />
        <date-time-picker class="opacity-0" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"></date-time-picker>
      </div>
      <div class="sn-icon sn-icon-close clear-date <%= 'tw-hidden' if !my_module.due_date %>"
           data-toggle='clear-date-time-picker'
           data-target='calendarDueDate<%= my_module.id %>'>
      </div>
    <% end %>
  </span>
</div>
