.block.due_date
  .title.gl-h-5.gl-display-flex.gl-align-items-center
    = _("Due date")
    - if can_admin_issue?
      = loading_icon(css_class: 'gl-ml-2 block-loading')
      = link_to _("Edit"), "#", class: "js-sidebar-dropdown-toggle edit-link gl-ml-auto"
  .value
    .value-content
      %span.no-value{ "v-if" => "!issue.dueDate" }
        = _("None")
      %span.bold{ "v-if" => "issue.dueDate" }
        {{ issue.dueDate | due-date }}
      - if can_admin_issue?
        %span.no-value.js-remove-due-date-holder{ "v-if" => "issue.dueDate" }
          \-
          %a.js-remove-due-date{ href: "#", role: "button" }
            = _('remove due date')
  - if can_admin_issue?
    .selectbox
      %input{ type: "hidden",
        name: "issue[due_date]",
        ":value" => "issue.dueDate" }
      .dropdown
        %button.dropdown-menu-toggle.js-due-date-select.js-issue-boards-due-date{ type: 'button',
          data: { toggle: 'dropdown', field_name: "issue[due_date]", ability_name: "issue" } }
          %span.dropdown-toggle-text= _("Due date")
          = icon('chevron-down')
        .dropdown-menu.dropdown-menu-due-date
          = dropdown_title(_('Due date'))
          = dropdown_content do
            .js-due-date-calendar