<div class="content" id="indicator_panel">
    <!-- Buttons for adding indicators -->
    <div style="display: grid; grid-template-columns: 1fr 1fr;">
        <div class="section" style="grid-column: 1;">
            <button class="btn" onclick="UI.indicators.open_form()">New Indicator</button>
        </div>
        <div class="section" style="grid-column: 2;">
            <button class="btn" style="width: 200px;" onclick="UI.signals.openExternalIndicatorForm()">+ External Indicator</button>
        </div>
    </div>
    <hr>

    <!-- External Indicators Section (Historical API - works with backtesting) -->
    <div id="external_indicators_section" style="display: none; margin-bottom: 15px;">
        <h3 style="color: #9f7aea; margin-bottom: 10px;">External Indicators <span style="font-size: 11px; color: #888;">(Historical API - works with backtesting)</span></h3>
        <div class="external-indicators-container" id="external_indicators_list"></div>
        <hr>
    </div>

    <!-- Regular Indicators Section (Icon Cards) -->
    <h3>Indicators</h3>
    <div class="indicators-container" id="indicators_list">
        <!-- Indicator cards will be rendered here by JavaScript -->
    </div>
</div>

<style>
    /* Indicators container - flex grid for cards */
    .indicators-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        padding: 10px;
    }

    /* Individual indicator card */
    .indicator-item {
        position: relative;
        width: 100px;
        height: 120px;
        border-radius: 10px;
        background: linear-gradient(145deg, #f0f0f0, #cacaca);
        box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: visible;
    }

    .indicator-item:hover {
        transform: translateY(-3px);
        box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    }

    /* Visibility-based styling */
    .indicator-item.visible {
        border: 3px solid #28a745;
    }

    .indicator-item.hidden {
        border: 3px solid #6c757d;
        opacity: 0.7;
    }

    /* Icon area */
    .indicator-icon {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: 5px;
    }

    .indicator-icon::before {
        content: '';
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8px;
        position: absolute;
    }

    /* Indicator type symbol */
    .indicator-symbol {
        position: relative;
        z-index: 1;
        font-size: 20px;
        color: white;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    /* Indicator name */
    .indicator-name {
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        color: #333;
        padding: 2px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 94px;
        margin: 0 auto;
    }

    /* Indicator type label */
    .indicator-item .indicator-type {
        font-size: 9px;
        text-align: center;
        color: #888;
        padding: 0 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Indicator value */
    .indicator-value {
        font-size: 10px;
        text-align: center;
        color: #666;
        padding: 2px 5px;
        font-weight: bold;
    }

    /* Delete button (top-right, shown on hover) */
    .indicator-item .delete-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #dc3545;
        color: white;
        border: 2px solid white;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: transform 0.2s;
        line-height: 1;
    }

    .indicator-item:hover .delete-btn {
        display: flex;
    }

    .indicator-item .delete-btn:hover {
        transform: scale(1.2);
    }

    /* Visibility toggle button (top-left) */
    .indicator-item .visibility-btn {
        position: absolute;
        top: -8px;
        left: -8px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #28a745;
        color: white;
        border: 2px solid white;
        font-size: 12px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: transform 0.2s;
    }

    .indicator-item:hover .visibility-btn {
        display: flex;
    }

    .indicator-item .visibility-btn:hover {
        transform: scale(1.2);
    }

    .indicator-item.hidden .visibility-btn {
        background: #6c757d;
    }

    /* External indicators container */
    .external-indicators-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }

    .external-indicator-item {
        position: relative;
        padding: 10px 15px;
        background: linear-gradient(145deg, #3d2a5a, #2a1e3e);
        border: 1px solid #6f42c1;
        border-radius: 8px;
        min-width: 150px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .external-indicator-item:hover {
        border-color: #9f7aea;
        transform: translateY(-2px);
    }

    .external-indicator-item .indicator-name {
        font-weight: bold;
        color: #e0e0e0;
        font-size: 13px;
        margin-bottom: 5px;
        max-width: none;
        white-space: normal;
    }

    .external-indicator-item .indicator-type {
        font-size: 11px;
        color: #9f7aea;
    }

    .external-indicator-item .delete-indicator-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #dc3545;
        color: white;
        border: none;
        font-size: 12px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
    }

    .external-indicator-item:hover .delete-indicator-btn {
        display: flex;
    }
</style>
