%li
  = link_to('#', 'aria-controls': 'badge-modal', role: 'button',
    data: { 'bs-toggle': 'modal', 'bs-target': '#badge-modal' }) do
    %i.fas.fa-certificate
    Create Badge


  .modal.fade#badge-modal{ tabindex: -1, role: 'dialog', 'aria-labelledby': 'badge-modal-label', 'aria-hidden': 'true' }
    .modal-dialog{ role: 'document' }
      .modal-content
        .modal-header
          %h5.modal-title#badge-modal-label
            Create Build Results Badge
          %button.btn.btn-close.float-end{ type: 'button', 'data-bs-dismiss': 'modal', 'aria-label': 'Close' }
        .modal-body
          %p
            Embed a build result badge whereever you need it. Select from
            the options below and copy the result over to your README or on
            your website, and enjoy it refresh automatically whenever the
            build result changes.
          .label{ for: 'badge-style-selector' } Select Style
          %select.form-select#badge-style-selector
            %option{ value: 'default', selected: 'selected' } Default
            %option{ value: 'percent' } Percent
          .d-flex
            = image_tag('', id: 'badge-preview', class: 'mt-3 mx-auto')
        .modal-footer
          .input-group.w-100
            = render CopyToClipboardInputComponent.new(input_text: project_package_badge_url(project, package, format: 'svg'))
:javascript
  const BASE_BADGE_URL = "#{project_package_badge_url(project, package, format: 'svg')}";
  const BASE_PACKAGE_URL = "#{package_show_url(project, package)}";

  $('#badge-style-selector').change(function() {
    badgeTextCopy();
  });

  // Despite setting defaults, the browser may preselect different option
  // on page load
  badgeTextCopy();
