{% extends "keydetail/base.html" %}
{% block keydetail %}

<div class="card-body">
    <table class="table table-striped" id="DataTable">
        <thead>
            <tr>
                <th class="text-center" style="width: 50%">Member</th>
                <th class="text-center" style="width: 30%">Score</th>
                <th class="text-center nosort">Action</th>
            </tr>
        </thead>
        <tbody>
            {% for member, score in key_details.data %}
            <tr>
                <td class="text-center">{{member}}</td>
                <td class="text-center">
                    {% set url=url_for('redisboard.zset_edit_score', db=db, key=key_details.name|quote_plus) %}
                    <a href="#" class="keydetail-editable" data-name="{{member}}" data-type="text"
                        data-url="{{url}}">{{score}}</a>
                </td>
                <td class="text-center">
                    <a href="#" onclick="zset_del('{{member}}')" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<form class="modal-part" id="zset-add-value">
    <div class="form-group">
        <label>Member</label>
        <input type="text" class="form-control" name="member">
    </div>
    <div class="form-group">
        <label>Score</label>
        <input type="text" class="form-control" name="score">
    </div>
</form>

<form class="modal-part" id="zset-del-value">
    <ul class="nav nav-tabs" id="myTab2" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab2" data-toggle="tab" href="#bymember" role="tab">By Member</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-tab2" data-toggle="tab" href="#byscore" role="tab">By Score Range</a>
        </li>
    </ul>
    <div class="tab-content tab-bordered" id="myTab3Content">
        <div class="tab-pane fade show active" id="bymember" role="tabpanel">
            <div class="form-group">
                <label>Members</label>
                <input type="text" class="form-control" name="member">
                <small class="form-text text-muted">Separate multiple members with ","</small>
            </div>
        </div>
        <div class="tab-pane fade" id="byscore" role="tabpanel">
            <div class="form-inline">
                <input type="text" class="form-control mr-sm-2" placeholder="Min Value" name="min">
                <input type="text" class="form-control" placeholder="Max Value" name="max">
            </div>
        </div>

    </div>
</form>
{% endblock %}

{% block js %}
{{ super() }}
<script src="{{ url_for('redisboard.static', filename='dist/pages/keydetail_zset.js') }}"></script>
{% endblock %}