<script type="text/x-template" class="lifecycle-inspector-template" data-type="circle">
    <div class="circle">
        <table>
          <tr>
            <td><&|/l&>Label</&>:</td>
            <td><input type="text" name="label" value="{{circle.label}}" /></td>
          </tr>

          <tr>
            <td><&|/l&>Border</&>:</td>
            <td>
              <input type="checkbox" name="renderStroke" {{#if circle.renderStroke}}checked=checked{{/if}} data-show-hide=".color-control[data-field=stroke], .stroke-style, tr.color-widget[data-field=stroke]">
              <span class="color-control" data-field="stroke">
                <span class="current-color" title="{{circle.stroke}}" style="background-color: {{circle.stroke}}">&nbsp;</span>
                <button class="change-color"><&|/l&>Change</&></button>
              </span>
            </td>
          </tr>
          <tr class="color-widget" data-field="stroke">
            <td colspan="2">
              <div class="color-picker"></div>
            </td>
          </tr>

          <tr class="stroke-style">
            <td><&|/l&>Style</&>:</td>
            <td><select name="strokeStyle">
              {{#select circle.strokeStyle}}
                <option value="solid"><&|/l&>solid</&></option>
                <option value="dashed"><&|/l&>dashed</&></option>
                <option value="dotted"><&|/l&>dotted</&></option>
              {{/select}}
            </select></td>
          </tr>

          <tr>
            <td><&|/l&>Fill</&>:</td>
            <td>
              <input type="checkbox" name="renderFill" {{#if circle.renderFill}}checked=checked{{/if}} data-show-hide=".color-control[data-field=fill], tr.color-widget[data-field=fill]">
              <span class="color-control" data-field="fill">
                <span class="current-color" title="{{circle.fill}}" style="background-color: {{circle.fill}}">&nbsp;</span>
                <button class="change-color"><&|/l&>Change</&></button>
              </span>
            </td>
          </tr>
          <tr class="color-widget" data-field="fill">
            <td colspan="2">
              <div class="color-picker"></div>
            </td>
          </tr>
        </table>

        <button class="clone"><&|/l&>Clone Circle</&></button><br>
        <button class="delete"><&|/l&>Delete Circle</&></button>
    </div>
</script>
