@(id: String, value: String, style: String = "", targetTextId: String = "")(html: Html = Html(""))
@if(html.body.nonEmpty){
  <div class="input-group" style="margin-bottom: 0px;">
    @html
    <span class="input-group-btn">
      <span id="@id" class="btn btn-default" @if(style.nonEmpty){style="@style"}
        data-clipboard-text="@value" data-placement="bottom" title="copy to clipboard"><i class="octicon octicon-clippy"></i></span>
    </span>
  </div>
} else {
  <span id="@id" class="btn btn-default" @if(style.nonEmpty){style="@style"}
    data-clipboard-text="@value" data-placement="bottom" title="copy to clipboard"><i class="octicon octicon-clippy"></i></span>
}
<script>
// copy to clipboard
(function() {
  @if(targetTextId.nonEmpty){
  // if document.execCommand('copy') is available, use it for copy.
  if (document.queryCommandSupported('copy')) {
    var title = $('#@id').attr('title');
    $('#@id').tooltip({
      @* if default container is used then 2 lines tooltip text is displayd because tooptip width is narrow. *@
      container: 'body'
    });
    $('#@id').on('click', function() {
      var target = document.getElementById('@targetTextId');
      if (!target) { @* target's id is incorrect. Fix argument's value *@
        $('#@id').attr('title', 'failed to copy').tooltip('fixTitle').tooltip('show');
        return;
      }
      if (typeof target.select === 'function') {
        target.select();
      } else {
        var range = document.createRange();
        range.selectNodeContents(target);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand('copy');
      $('#@id').attr('title', 'copied!').tooltip('fixTitle').tooltip('show');
      $('#@id').attr('title', title).tooltip('fixTitle');
    });
    return
  }
  }
  // Check flash availablibity
  var flashAvailable = false;
  try {
    var flashObject = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
    if(flashObject) flashAvailable = true;
  } catch (e) {
    if (navigator.mimeTypes
        && navigator.mimeTypes['application/x-shockwave-flash'] != undefined
        && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
      flashAvailable = true;
    }
  }
  // if flash is not available, remove the copy button.
  if(!flashAvailable) {
    $('#@id').remove();
    return
  }

  // Find ZeroClipboard.swf file URI from ZeroClipboard JavaScript file path.
  // NOTE(tanacasino) I think this way is wrong... but i don't know correct way.
  var moviePath = (function() {
    var zclipjs = "ZeroClipboard.min.js";
    var scripts = document.getElementsByTagName("script");
    var i = scripts.length;
    while(i--) {
      var match = scripts[i].src.match(zclipjs + "$");
      if(match) {
        return match.input.substr(0, match.input.length - 6) + 'swf';
      }
    }
  })();
  var clip = new ZeroClipboard($("#@id"), {
    moviePath: moviePath
  });
  var title = $('#@id').attr('title');
  $('#@id').removeAttr('title')
  clip.htmlBridge = "#global-zeroclipboard-html-bridge";
  clip.on('complete', function(client, args) {
    $(clip.htmlBridge).attr('title', 'copied!').tooltip('fixTitle').tooltip('show');
    $(clip.htmlBridge).attr('title', title).tooltip('fixTitle');
  });
  $(clip.htmlBridge).tooltip({
    title: title,
    placement: $('#@id').attr('data-placement')
  });
})();
</script>