{% extends "keydetail/base.html" %}
{% block keydetail %}
<div class="card-header">
    <h4></h4>
    <div class="card-header-action">
        <a href="#" class="btn btn-primary" id="list-add-btn"><i class="fas fa-plus"></i>Add</a>
        <a href="#" class="btn btn-danger" id="list-del-btn"><i class="fas fa-trash"></i>Remove</a>
    </div>
</div>
<div class="card-body">
    <table class="table table-striped">
        <tr>
            <th class="text-center" style="width: 10%" data-toggle="tooltip"
                title="To view list values is an O(n) operation, only can priview front 1000 data">Index</th>
            <th class="text-center" style="width: 90%">Value</th>
        </tr>
        {% for index, value in key_details.data %}
        <tr>
            <td class="text-center">{{index}}</td>
            <td class="text-center">
                {% set url=url_for('redisboard.list_edit_value', db=db, key=key_details.name|quote_plus) %}
                <a href="#" class="myeditable" data-name="{{index}}" data-type="text" data-url="{{url}}">{{value}}</a>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>
<div class="card-footer text-right">

</div>

<form class="modal-part" id="list-add-value">
    <div class="form-group">
        <label class="d-block">Position</label>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="position" value="0" id="inlineradio1" checked>
            <label class="form-check-label" for="inlineradio1">Head</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="position" value="-1" id="inlineradio2">
            <label class="form-check-label" for="inlineradio2">Tail</label>
        </div>
    </div>
    <div class="form-group">
        <label>Value</label>
        <div class="input-group">
            <!-- TODO 没有验证值为空 -->
            <input type="text" class="form-control" name="value">
        </div>
    </div>
</form>

<form class="modal-part" id="list-del-value">
    <div class="form-group">
        <label>Value</label>
        <div class="input-group">
            <!-- TODO 没有验证值为空 -->
            <input type="text" class="form-control" name="value" placeholder="del which value?">
        </div>
    </div>
    <div class="form-group">
        <label class="d-block">Count</label>
        <div class="input-group">
            <input type="text" class="form-control" name="count" placeholder="del how many value?">
        </div>
        <small class="form-text text-muted">
            count > 0: Remove elements equal to value moving from head to tail.<br />
            count
            < 0: Remove elements equal to value moving from tail to head.<br />
            count = 0: Remove all elements equal to
            value.</small>
    </div>
</form> {% endblock %}