- expanded = integration_expanded?('diagramsnet_')
%section.settings.as-diagramsnet.no-animate#js-diagramsnet-settings{ class: ('expanded' if expanded) }
  .settings-header
    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
      = _('Diagrams.net')
    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
      = expanded ? _('Collapse') : _('Expand')
    %p.gl-text-secondary
      = _('Render diagrams in your documents using diagrams.net.')
      = link_to _('Learn more.'), help_page_path('administration/integration/diagrams_net'), target: '_blank', rel: 'noopener noreferrer'
  .settings-content
    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-diagramsnet-settings'), html: { class: 'fieldset-form', id: 'diagramsnet-settings' } do |f|
      = form_errors(@application_setting) if expanded

      %fieldset
        .form-group
          = f.gitlab_ui_checkbox_component :diagramsnet_enabled,
            _('Enable diagrams.net')
        .form-group
          = f.label :diagramsnet_url, _('Diagrams.net URL'), class: 'label-bold'
          = f.text_field :diagramsnet_url, class: 'form-control gl-form-input', placeholder: 'https://embed.diagrams.net'
          .form-text.text-muted
            = _('The hostname of your diagrams.net server.')

      = f.submit _('Save changes'), pajamas_button: true