% unless ($opt{js_only}) {
<& hidden.html, 'field' => $id, @_ &>
%#    <& input-text.html, 'id' => $id, @_ &> # XXX debugging
<UL ID="<%$id%>_display_fcc_options" CLASS="fcc_options">
</UL>
<button type="button" class="edit_fcc_button" data-target="<% $id %>">
  Edit
</button>
% }
% unless ($opt{html_only}) {
%   my $popup = $fsurl.'misc/part_pkg_fcc_options.html?id=';
%   my $popup_name = 'popup-'.random_id();
<SCRIPT TYPE="text/javascript">
function edit_fcc_options() {
  var id = this.dataset['target'];
  overlib(
    OLiframeContent( '<% $popup %>' + id,
      760, 600, '<% $popup_name %>', 0, 'auto' ),
    CAPTION, 'FCC Form 477 options', 
    STICKY, AUTOSTATUSCAP, MIDX, 0, MIDY, 0,
    DRAGGABLE, CLOSECLICK,
    BGCOLOR, '#333399', CGCOLOR, '#333399',
    CLOSETEXT, 'Close'
  );
}

var technology_labels = <% encode_json(FS::part_pkg_fcc_option->technology_labels) %>;
function show_fcc_options(id) {
  var curr_values = JSON.parse(document.getElementById(id).value);
  // hardcoded for the same reasons as misc/part_pkg_fcc_options
  var out = '';
  var tech = curr_values['technology'];
  if ( tech ) {
    if (technology_labels[tech]) {
      tech = technology_labels[tech];
    } else {
      tech = 'Technology '+tech; // unknown?
    }
  }
  var media = curr_values['media'] || 'unknown media';
  media = media.toLowerCase();
  if ( curr_values['is_consumer'] ) {
    out += '<li><strong>Consumer-grade</strong> service</li>';
  } else {
    out += '<li><strong>Business-grade</strong> service</li>';
  }
  if ( curr_values['is_broadband'] ) {
    out += '<li>Broadband via <strong>' + tech + '</strong>'
        +  '<li><strong>' + curr_values['broadband_downstream']
        +  'Mbps </strong> down / '
        +  '<strong>' + curr_values['broadband_upstream']
        +  'Mbps </strong> up</li>';
  }
  if ( curr_values['is_phone'] ) {
    if ( curr_values['phone_wholesale'] ) {
      out += '<li>Wholesale telephone</li>';
      if ( curr_values['phone_vges'] ) {
        out += '<li><strong>' + curr_values['phone_vges'] + '</strong>'
            +  ' switched voice-grade lines</li>';
      }
      if ( curr_values['phone_circuits'] ) {
        out += '<li><strong>' + curr_values['phone_circuits'] + '</strong>'
            +  ' unswitched circuits</li>';
      }
    } else {
      // enduser service
      out += '<li>Local telephone over <strong>' + media + '</strong></li>'
          +  '<li><strong>' + curr_values['phone_lines']
          +  '</strong> voice-grade lines</li>';
      if ( curr_values['phone_localloop'] == 'resale' ) {
        out += '<li><strong>Resold</strong> from another carrier</li>>';
      } else if ( curr_values['phone_localloop'] == 'leased' ) {
        out += '<li>Using <strong>leased circuits</strong> from another carrier</li>';
      } else if ( curr_values['phone_localloop'] == 'owned' ) {
        out += '<li>Using <strong>our own circuits</strong></li>';
      }
      if ( curr_values['phone_longdistance'] ) {
        out += '<li>Includes <strong>long-distance service</strong></li>';
      }
    }
  } // is_phone
  if ( curr_values['is_voip'] ) {
    out += '<li><strong>VoIP</strong> telephone service over <strong>' 
            + media + '</strong></li>';
    out += '<li><strong>' + curr_values['voip_sessions'] + 
           '</strong> sessions allowed</li>';
    if ( curr_values['voip_lastmile'] ) {
      out += '<li><strong>Including</strong> last-mile connection</li>';
    } else {
      out += '<li>Using a <strong>separate</strong> last-mile connection</li>';
    }
  } // is_voip
  if ( curr_values['is_mobile'] ) {
    out += '<li><strong>Mobile</strong> telephone service</li>';
    if ( curr_values['mobile_direct'] ) {
      out += '<li>Billed <strong>directly to the user</strong></li>';
    }
  } // is_mobile

  var out_ul = document.getElementById(id + '_display_fcc_options');
  out_ul.innerHTML = out;
}
<&| onload.js &>
  var edit_fcc_buttons = document.getElementsByClassName('edit_fcc_button');
  for(var i = 0; i < edit_fcc_buttons.length; i++) {
    var button = edit_fcc_buttons[i];
    show_fcc_options( button.dataset['target'] );
    button.addEventListener('click', edit_fcc_options);
  }
</&>
</SCRIPT>
% }
<%init>
my %opt = @_;
my $id = $opt{id} || $opt{field};
</%init>